vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(frontend): stack the warning banner + tab bar in one sticky wrapper (#1587)

Browse source 
Per mara's review: instead of measuring the banner height in JS and
offsetting the chrome's sticky top, put the warning banner and the page
chrome in the same sticky div so they stack naturally.

common.js builds the wrapper: ensureStickyTop() wraps the page's chrome
(.dashboard-chrome / .page-header) in a single .sticky-top container and
injects the warning banner as its first child. The banner and the chrome
are no longer individually sticky — .sticky-top owns the stickiness, so
they pin together in one context instead of two top:0 stickies colliding
(the banner used to overlay the tab bar). Pages without a chrome (the
H0M3 hub) get a banner-only sticky region. No per-page markup needed; no
JS height measurement. Build green.
This commit is contained in:
iris 2026-06-10 01:05:55 +02:00
commit d7bba48176
4 changed files with 46 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/packages/dashboard/src/common.js
View file

@ -634,6 +634,28 @@ export const NOTIF = (() => {
// `level` (`warn` amber / `crit` red). Adding a new system warning is a
// backend-only change. The bar is injected at the top of <body> so no
// page needs to add markup.
// The sticky top region — one sticky container holding the warning
// banner above the page's chrome (tab bar / page header), so the banner
// stacks with the chrome instead of being overlaid by it (two separate
// `top:0` stickies would otherwise collide). Built once by wrapping the
// page's existing chrome element; pages without a chrome (e.g. the H0M3
// hub) get a banner-only sticky region at the top of <body>.
function ensureStickyTop() {
let top = document.querySelector('.sticky-top');
if (top) return top;
top = document.createElement('div');
top.className = 'sticky-top';
const chrome = document.querySelector('.dashboard-chrome, .page-header');
if (chrome && chrome.parentNode) {
chrome.parentNode.insertBefore(top, chrome);
top.append(chrome);
} else {
document.body.prepend(top);
}
return top;
}
function ensureServerWarningsBar() {
let bar = document.getElementById('server-warnings');
if (!bar) {
@ -642,7 +664,7 @@ function ensureServerWarningsBar() {
bar.className = 'server-warnings';
bar.setAttribute('role', 'alert');
bar.hidden = true;
document.body.prepend(bar);
ensureStickyTop().prepend(bar);
}
return bar;
}