dashboard: tab strip above banner-thin in chrome (#389)

Swap the order of `.tabbar` and `.banner` inside `.dashboard-chrome`
so the operator's navigation surface sits at the very top of the
sticky/fixed header — the "WE ARE THE WIRED" slug becomes decoration
below the tabs rather than chrome above them.

Applied to both `index.html` (sticky chrome) and `flow.html`
(fixed-overlay chrome).

No CSS changes — `.tabbar { border-bottom }` still divides tabs from
the area below (now the banner), and active-tab `margin-bottom: -1px`
still merges into that boundary cleanly.
This commit is contained in:
iris 2026-05-25 00:38:12 +02:00
parent d79b8a0a38
commit 91a72b5cbb
2 changed files with 10 additions and 9 deletions

View file

@ -12,11 +12,10 @@
(#383) — operator never has to navigate back to the dashboard
to switch tabs. FL0W is the current page, the SW4RM / Y3R C4LL
/ SYST3M tabs cross-link to the dashboard with the matching
hash so the destination tab is pre-active. Banner-thin echoes
the dashboard for visual continuity. -->
hash so the destination tab is pre-active. Tab strip on top,
banner-thin below (#389 — tabs are navigation, slug is
decoration). -->
<header class="dashboard-chrome flow-chrome" id="flow-header">
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
<nav class="tabbar" id="tabbar" role="tablist">
<a class="tab" href="/#swarm" role="tab" data-tab="swarm">
<span class="tab-label">◆ SW4RM ◆</span>
@ -47,6 +46,7 @@
<span id="notif-status" class="meta" hidden></span>
</div>
</nav>
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
</header>
<!-- Operator inbox flyout trigger — count + click → side panel

View file

@ -8,12 +8,12 @@
</head>
<body class="dashboard-shell">
<!-- Sticky chrome — banner + tab strip. Tabs route via the URL
hash so F5 / back-button / shared links keep you on the same
view. JS owns the actual show/hide; this is just the menu. -->
<!-- Sticky chrome — tab strip on top, banner below (#389: tabs are
the navigation surface, slug is decoration; tabs go first).
Tabs route via the URL hash so F5 / back-button / shared links
keep you on the same view. JS owns the actual show/hide; this
is just the menu. -->
<header class="dashboard-chrome">
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
<nav class="tabbar" id="tabbar" role="tablist">
<a class="tab" id="tab-swarm" href="#swarm" role="tab"
aria-controls="tab-pane-swarm"
@ -55,6 +55,7 @@
<span id="notif-status" class="meta" hidden></span>
</div>
</nav>
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
</header>
<!-- Tab panes. Exactly one is `.tab-pane-active` at a time;