CSS To Auto hide sidebars below certain window size

[gal064]

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!

/* 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;
  }
}

[executed]

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