CSS To Auto hide sidebars below certain window size

Features
1

I wrote custom CSS so when I reduce Joplin screen size, the notebook and note list auto-hide.

This is especially useful when taking notes during a video call so I split my screen between the video and Joplin.

I hope it helps other people!

CleanShot 2024-11-08 at 22.13.36

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

@media (max-width: 1000px) {
  .rli-sideBar,
  .rli-noteList {
    display: none !important;
  }

  .rli-editor {
    width: unset !important;
    flex-grow: 1 !important;
  }

  .rli-editor > div {
    width: unset !important;
  }
}
6 Likes
2

Hmm. Will it make sense to add this as a feature toggle?
CSS class names don't look like they are going to be changed in the future which is the main concern about CSS styling.

BTW I think it's worth sharing this with folks in this hot thread