andreas/heartbeat
Public Access
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

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

Browse Source 
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
This commit is contained in:
andreas
2026-07-10 09:19:21 -04:00
co-authored by Claude Fable 5
parent c564fafe73
commit 067feacd59
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hbd/server/templates/settings.html
+18 -5
View File
@@ -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>