Browse Source

Fix the sticky sub-nav regression from the static topbar

The topbar went static in review round 3 (it pinned a tall band over mobile content), but syncTopbarOffset still published the bar's height as --topbar-bottom, and the sticky rules' 3.1rem fallback kept strips floating mid-air: the goal/task sub-nav strips and the log toolbar stopped sticking. syncTopbarOffset now publishes 0 when the topbar is static (strips park at the viewport top and stay sticky), the three 3.1rem CSS fallbacks become 0px, and jumpOffset still measures the real bar height for in-page anchor jumps on a fresh page where the bar is visible. Both build dirs green.
saddle-ClankerSaddle 18 hours ago
parent
commit
53daf9227c
2 changed files with 12 additions and 7 deletions
  1. 3 3
      src/pages/app.css
  2. 9 4
      src/pages/app.js

+ 3 - 3
src/pages/app.css

@@ -1404,7 +1404,7 @@ td .truncate.repo-url {
     box-shadow: var(--spry-shadow);
     margin: 0 0 var(--spry-space-3);
     position: sticky;
-    top: var(--topbar-bottom, 3.1rem);
+    top: var(--topbar-bottom, 0px);
     z-index: 10;
 }
 
@@ -1428,7 +1428,7 @@ td .truncate.repo-url {
 .log-shell { display: flex; flex-direction: column; }
 .log-toolbar {
     position: sticky;
-    top: var(--topbar-bottom, 3.1rem);
+    top: var(--topbar-bottom, 0px);
     z-index: 5;
 }
 .log-jump {
@@ -1520,7 +1520,7 @@ td .truncate.repo-url {
 .task-log-panel .log-toolbar {
     /* Inside the tab panel the toolbar parks under the topbar like
        the standalone page; the subnav strip is Overview-only. */
-    top: var(--topbar-bottom, 3.1rem);
+    top: var(--topbar-bottom, 0px);
 }
 
 /* The sub-nav strip belongs to the Overview surface; the Log panel

+ 9 - 4
src/pages/app.js

@@ -413,10 +413,15 @@
         // `top:` tracks any wrap/viewport.
         function syncTopbarOffset() {
             var bar = document.querySelector('.topbar');
-            if (bar && bar.offsetHeight > 0) {
-                root.style.setProperty('--topbar-bottom',
-                    bar.offsetHeight + 'px');
-            }
+            // The topbar is static (review round 3 - it scrolled away with
+            // the page), so nothing sits above a sticky strip except a
+            // SCROLLED-PAST topbar: publish 0 and let app.css park the
+            // strips at the viewport top. jumpOffset() still measures the
+            // real bar for in-page anchor jumps (a click near the top of a
+            // fresh page can land while the bar is still visible).
+            var offset = (bar && getComputedStyle(bar).position === 'sticky')
+                ? bar.offsetHeight : 0;
+            root.style.setProperty('--topbar-bottom', offset + 'px');
         }
 
         // How much sticky chrome sits above a scrolled-to heading: