From bb2a031135101942d4f1965d60d76f03b02b358a Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Tue, 9 Jun 2026 11:23:41 +0200
Subject: [PATCH] refactor(frontend): unify dashboard tabbar with the minimal
 pill chrome (#1464 step 3b)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard tabbar was the styling outlier: a folder-tab metaphor
(top-rounded corners, transparent side borders overlapping the strip
border, and a box-shadow lift on the active tab) while every standalone
page's sub-tabs use the flat shared .hive-tab pill. Restyle .tabbar .tab
to the same pill family — drop the lift shadow, folder border and
top-only radius; active tab now uses the filled var(--border) background
like .hive-tab--active.

Kept a touch more weight than the bare sub-tab (larger 0.92em font, bold
labels, count pills) since this is the dashboard's primary nav, per the
operator's 'less fancy but not too minimal' steer. CSS-only, no markup
or behaviour change.
---
 frontend/packages/dashboard/src/dashboard.css | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index a47f3732..1c32848d 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -62,38 +62,36 @@ body.dashboard-shell {
   flex-wrap: nowrap;
   align-items: center;
   gap: 0.2em;
-  padding: 0.5em 1em 0;
+  padding: 0.5em 1em;
   border-bottom: 1px solid var(--purple-dim);
 }
+/* Shares the flat-pill aesthetic of the shared `.hive-tab` (sub-tabs on
+   the standalone pages) so the chrome reads as one family. Kept a touch
+   weightier than bare `.hive-tab` — larger font, bold labels, count
+   pills — since this is the dashboard's primary nav, not a sub-strip. */
 .tabbar .tab {
   display: inline-flex;
   align-items: center;
   gap: 0.5em;
   flex-shrink: 0;
-  padding: 0.55em 1em 0.45em;
-  margin-bottom: -1px; /* overlap the tabbar bottom border */
+  padding: 0.4em 0.95em;
   color: var(--muted);
   font-family: inherit;
   font-size: 0.92em;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.06em;
   text-decoration: none;
-  border: 1px solid transparent;
-  border-bottom: 0;
-  border-radius: 4px 4px 0 0;
+  border: 0;
+  border-radius: 4px;
   cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  transition: color 0.15s ease, background 0.15s ease;
 }
 .tabbar .tab:hover {
-  color: var(--purple);
-  background: color-mix(in srgb, var(--purple) 6%, transparent);
+  color: var(--fg);
+  background: var(--border);
 }
 .tabbar .tab.hive-tab--active {
   color: var(--purple);
-  border-color: var(--purple-dim);
-  background: var(--bg);
-  /* Lift the active tab visually — the bottom border of the tabbar
-     yields under it via the -1px margin above. */
-  box-shadow: 0 -2px 12px -4px color-mix(in srgb, var(--purple) 40%, transparent);
+  background: var(--border);
 }
 .tab-label { font-weight: bold; white-space: nowrap; }
 .tab-count {