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

fix(frontend): put the dashboard home link and tab strip on one row (#1576)

Browse source 
.dashboard-chrome was a plain block, so the inline-block home back-link
and the block-level .tabbar stacked on two separate rows. Make the chrome
a flex row (align-items: center) so the '← home' link and the tab strip
sit side by side. The chrome now owns the horizontal gutter and the
single full-width bottom divider; .dash-home-back and .tabbar drop their
own side padding / border accordingly. CSS-only — the markup already had
both as siblings of the chrome header.
This commit is contained in:
iris 2026-06-09 13:35:33 +02:00 • committed by mara
commit 5ef6a8b683
1 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/packages/dashboard/src/dashboard.css
View file

@ -21,6 +21,12 @@ body.dashboard-shell {
} }
.dashboard-chrome { .dashboard-chrome {
/* Home back-link + tab strip share one row (flex). The chrome owns the
horizontal gutter and the single full-width bottom divider; its
children drop their own side padding / border so they sit inline. */
display: flex;
align-items: center;
gap: 0.75em;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 25; z-index: 25;
@ -28,7 +34,7 @@ body.dashboard-shell {
-webkit-backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
border-bottom: 1px solid var(--purple-dim); border-bottom: 1px solid var(--purple-dim);
padding: 0.4em 0 0; padding: 0.3em 1em;
margin: 0 0 1em; margin: 0 0 1em;
} }
/* ← home back-link to the H0M3 hub. Small purple link top-left of the /* ← home back-link to the H0M3 hub. Small purple link top-left of the
@ -37,11 +43,10 @@ body.dashboard-shell {
consistently. The dashboard keeps this richer sticky chrome of its consistently. The dashboard keeps this richer sticky chrome of its
own rather than folding into the simple page header. */ own rather than folding into the simple page header. */
.dash-home-back { .dash-home-back {
display: inline-block; flex: none;
color: var(--purple); color: var(--purple);
text-decoration: none; text-decoration: none;
font-size: 0.82em; font-size: 0.82em;
padding: 0.1em 1em 0;
white-space: nowrap; white-space: nowrap;
} }
.dash-home-back:hover { text-decoration: underline; } .dash-home-back:hover { text-decoration: underline; }
@ -62,8 +67,8 @@ body.dashboard-shell {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 0.2em; gap: 0.2em;
padding: 0.5em 1em; /* On one row with the home link now; the chrome owns the gutter +
border-bottom: 1px solid var(--purple-dim); the bottom divider, so no outer padding / border here. */
} }
/* Shares the flat-pill aesthetic of the shared `.hive-tab` (sub-tabs on /* 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 the standalone pages) so the chrome reads as one family. Kept a touch