archiving

assets/styles/media.css

@@ -88,14 +88,12 @@
    ========================================================= */
 
 @media (max-width: 900px) {
-  #sidebar {
-    width: 0;
-    border-right: none;
-    overflow: hidden;
+  #sidebar:not(.expanded):not(.mobile-open) {
+    width: var(--rail-w);
   }
 
   .fullwidth {
-    max-width: calc(100vw - 2rem);
+    max-width: calc(100vw - var(--rail-w) - 2rem);
   }
 }
 
@@ -172,22 +170,22 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 80vw;
-    max-width: 300px;
+    width: min(92vw, var(--sidebar-w));
     height: 100dvh;
     z-index: 400;
     border-right: 1px solid var(--border-mid);
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
     transform: translateX(-100%);
     transition: transform var(--dur-mid) var(--ease-out),
                 box-shadow var(--dur-mid) var(--ease-out);
     box-shadow: none;
   }
 
-  #sidebar.mobile-open {
+  #sidebar.mobile-open,
+  #sidebar.expanded {
     transform: translateX(0);
     box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
+    width: min(92vw, var(--sidebar-w)) !important;
   }
 
   #sidebar-backdrop {
@@ -218,12 +216,7 @@
   #content-area {
     overflow: visible;
     height: auto;
-    min-height: calc(100dvh - var(--header-h) - var(--tab-h));
-    background-attachment: scroll;
-  }
-
-  #content-area::before {
-    display: none;
+    min-height: calc(100dvh - var(--header-h) - var(--toolbar-h));
   }
 
   /* ---- Note content ---- */