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

View file

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