fix: settings toolbar sticks below the site nav instead of scrolling away

Sticky offsets (toolbar, rail, mobile chips, anchor margins) derive from
the measured nav/toolbar heights via CSS variables, since the fixed nav's
height varies with viewport width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NfPpSpccTWBfZg1FTveyaU

hbd/server/templates/settings.html

@@ -49,7 +49,7 @@
 
     /* ── sticky toolbar under the site nav ── */
     .st-toolbar {
-      position: sticky; top: 0; z-index: 90;
+      position: sticky; top: var(--nav-h, 48px); z-index: 90;
       display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
       padding: 9px 20px;
       background: var(--st-surface); border-bottom: 1px solid var(--st-line);
@@ -79,7 +79,7 @@
 
     /* ── shell: rail + main ── */
     .shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; max-width: 1100px; margin: 0 auto; padding: 0 20px 90px; }
-    .rail { position: sticky; top: 56px; align-self: start; padding-top: 18px; max-height: calc(100vh - 70px); overflow-y: auto; }
+    .rail { position: sticky; top: calc(var(--bars-h, 94px) + 8px); align-self: start; padding-top: 18px; max-height: calc(100vh - var(--bars-h, 94px) - 20px); overflow-y: auto; }
     .rail a {
       display: flex; justify-content: space-between; gap: 8px;
       padding: 6px 10px; border-radius: 6px; text-decoration: none;
@@ -93,7 +93,7 @@
     .chips-nav { display: none; }
 
     /* ── sections ── */
-    section.st { margin-top: 26px; scroll-margin-top: 96px; }
+    section.st { margin-top: 26px; scroll-margin-top: calc(var(--bars-h, 94px) + 12px); }
     .sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
     .sec-head h2 { margin: 0; font-family: var(--st-mono); font-size: 15px; font-weight: 700; color: var(--st-ink); }
     .sec-head h2 .colon { color: var(--st-accent); }
@@ -217,7 +217,7 @@
       .rail { display: none; }
       .chips-nav {
         display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
-        position: sticky; top: 46px; z-index: 80;
+        position: sticky; top: var(--bars-h, 94px); z-index: 80;
         padding: 8px 10px; background: var(--st-paper); border-bottom: 1px solid var(--st-line-soft);
         scrollbar-width: none;
       }
@@ -235,7 +235,7 @@
       .row .act { grid-row: 1; grid-column: 2; }
       .row .facts { grid-column: 1 / -1; }
       .kv .row { grid-template-columns: 1fr; }
-      section.st { scroll-margin-top: 140px; }
+      section.st { scroll-margin-top: calc(var(--bars-h, 94px) + 50px); }
     }
   </style>
 
@@ -1444,7 +1444,20 @@
       }, { threshold: 0.2 });
       _navSections.forEach(s => _navObserver.observe(s));
 
+      // Keep the toolbar stuck just below the fixed site nav (whose height
+      // varies with viewport width and wrapping).
+      function _setStickyOffsets() {
+        const nav = document.querySelector('.nav');
+        const tb = document.querySelector('.st-toolbar');
+        const navH = nav ? nav.offsetHeight : 48;
+        const barsH = navH + (tb ? tb.offsetHeight : 46);
+        document.documentElement.style.setProperty('--nav-h', navH + 'px');
+        document.documentElement.style.setProperty('--bars-h', barsH + 'px');
+      }
+      window.addEventListener('resize', _setStickyOffsets);
+
       document.addEventListener('DOMContentLoaded', () => {
+        _setStickyOffsets();
         _loadChannelSchemas();
       });
     </script>