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

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.

frontend/packages/shared/src/chrome.css

@@ -15,9 +15,9 @@
      </header>
 */
 .page-header {
-  position: sticky;
-  top: 0;
-  z-index: 25;
+  /* Stickiness lives on the `.sticky-top` wrapper (common.css) that
+     common.js wraps this header in, alongside the server-warning banner,
+     so the two stack instead of colliding. */
   background: color-mix(in srgb, var(--bg) 92%, transparent);
   -webkit-backdrop-filter: blur(8px) saturate(120%);
   backdrop-filter: blur(8px) saturate(120%);