Update Layout

assets/style.css

@@ -145,13 +145,28 @@ header {
     color: var(--danger-hover);
 }
 
+/* === Page wrap ===
+   Note: sticky positioning on .sidebar depends on no ancestor having
+   overflow: auto/hidden. If you add scroll containment above this, sticky
+   will silently break. */
+.page-wrap {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 14rem;
+    gap: 1.5rem;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    width: 100%;
+    flex: 1;
+    align-items: start;
+}
+
 /* === Main === */
 main {
-    max-width: 860px;
-    margin: 0 auto;
     padding: 1.5rem 1rem;
     width: 100%;
     flex: 1;
+    min-width: 0;
 }
 
 /* === Markdown content === */
@@ -392,7 +407,7 @@ button.fab {
     flex-direction: column;
 }
 
-body.editor-wide main {
+body.editor-wide .page-wrap {
     max-width: none;
 }
 
@@ -546,24 +561,27 @@ hr {
     background: var(--primary-hover);
 }
 
-/* === Right rail === */
-.right-rail {
-    position: fixed;
+/* === Sidebar === */
+.sidebar {
+    position: sticky;
     top: 1rem;
-    right: 1rem;
-    width: 14rem;
+    align-self: start;
     max-height: calc(100vh - 2rem);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    z-index: 10;
+    margin-top: 1.5rem;
 }
 
-/* Panels share visual treatment when inside the rail */
+aside.sidebar:empty {
+    display: none;
+}
+
+/* Panels share visual treatment when inside the sidebar */
 .actions,
-.right-rail .toc,
-.right-rail .diary-cal {
+.sidebar .toc,
+.sidebar .diary-cal {
     position: static;
     top: auto;
     left: auto;
@@ -795,17 +813,6 @@ hr {
 }
 
 /* === Diary Calendar === */
-.diary-cal {
-    position: fixed;
-    top: 1rem;
-    left: 1rem;
-    width: 13rem;
-    border: 1px solid var(--secondary);
-    background: var(--bg);
-    padding: 0.5rem 0.75rem;
-    font-size: 0.85rem;
-}
-
 .diary-cal-nav {
     display: flex;
     align-items: center;
@@ -874,12 +881,14 @@ hr {
 
 /* === Responsive === */
 @media (max-width: 1100px) {
-    .right-rail {
+    .page-wrap {
+        grid-template-columns: 1fr;
+    }
+    .sidebar {
+        display: contents;
         position: static;
-        width: auto;
         max-height: none;
         overflow: visible;
-        display: contents;
     }
     button.fab {
         display: inline-flex;
@@ -922,7 +931,7 @@ hr {
         display: block;
     }
     /* TOC on mobile is a floating overlay toggled by the FAB. */
-    .right-rail .toc,
+    .sidebar .toc,
     .toc {
         position: fixed;
         bottom: 5rem;
@@ -936,7 +945,7 @@ hr {
         display: none;
         z-index: 60;
     }
-    .right-rail .toc.is-open,
+    .sidebar .toc.is-open,
     .toc.is-open {
         display: block;
     }