Update Layout

assets/layout.html

@@ -29,9 +29,12 @@
             {{end}}
             {{block "headerActions" .}}{{end}}
         </header>
+        <div class="page-wrap">
             <main>
                 {{block "content" .}}{{end}}
             </main>
+            <aside class="sidebar">{{block "sidebar" .}}{{end}}</aside>
+        </div>
         <footer>
             <span class="muted">Request: {{.RenderMS}} ms</span>
             {{block "footerExtras" .}}{{end}}

assets/page/main.html

@@ -1,4 +1,4 @@
-{{define "headScripts"}}<script src="/_/page/actions.js"></script><script src="/_/page/right-rail.js" defer></script>{{end}}
+{{define "headScripts"}}<script src="/_/page/actions.js"></script>{{end}}
 
 {{define "content"}}
 {{if .Content}}
@@ -34,20 +34,13 @@
 {{end}}
 {{end}}
 
-{{define "extras"}}
-<div class="right-rail">
-    {{if .CanEdit}}
-    <nav class="actions">
+{{define "sidebar"}}{{if .CanEdit}}<nav class="actions">
     <div class="panel-header">ACTIONS</div>
-        <button class="btn btn-block" onclick="newPage()" title="New page (N)">NEW</button>
-        <a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT</a>
-        <button class="btn btn-block" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button>
+    <button class="btn btn-block" onclick="newPage()" title="New page (N)">NEW PAGE</button>
+    <a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT PAGE</a>
+    <button class="btn btn-block" data-companion-reveal hidden title="Reveal in file manager">REVEAL ON CLIENT</button>
     {{if not .IsRoot}}
-        <button class="btn btn-block" onclick="movePage()" title="Move page (M)">MOVE</button>
-        <button class="btn btn-block danger" onclick="deletePage()" title="Delete page">DELETE</button>
+    <button class="btn btn-block" onclick="movePage()" title="Move page (M)">MOVE PAGE</button>
+    <button class="btn btn-block danger" onclick="deletePage()" title="Delete page">DELETE PAGE</button>
     {{end}}
-    </nav>
-    {{end}}
-    {{if .SidebarWidget}}{{.SidebarWidget}}{{end}}
-</div>
-{{end}}
+</nav>{{end}}{{if .SidebarWidget}}{{.SidebarWidget}}{{end}}{{end}}

assets/page/right-rail.js

@@ -1,17 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    var rail = document.querySelector(".right-rail");
-    if (!rail) return;
-    var header = document.querySelector("header");
-    if (!header) return;
-    function updateTop() {
-        if (getComputedStyle(rail).position !== "fixed") {
-            rail.style.top = "";
-            return;
-        }
-        var rect = header.getBoundingClientRect();
-        rail.style.top = Math.max(8, rect.bottom + 8) + "px";
-    }
-    window.addEventListener("scroll", updateTop, { passive: true });
-    window.addEventListener("resize", updateTop);
-    updateTop();
-});

assets/page/toc.js

@@ -28,12 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
   });
   nav.appendChild(list);
 
-  var rail = document.querySelector(".right-rail");
-  if (!rail) {
-    rail = document.createElement("div");
-    rail.className = "right-rail";
-    document.body.appendChild(rail);
-  }
+  var rail = document.querySelector("aside.sidebar");
   rail.appendChild(nav);
 
   var fab = document.createElement("button");

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