vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: stop nav-link icons cramming against the head row's right edge

Browse source 
The per-container nav strip's <a> elements had class "meta nav-link".
`.container-row .head .meta { margin-left: auto }` then matched every
link, so as flex siblings the first one absorbed all the available
space and the rest packed against it on the right — the icons looked
like they overlapped (issue #333).

Drop `meta` from the link class. Add a `.nav-strip` rule that is
inline-flex with a 0.35em gap so the icons sit on a fixed cadence
regardless of how many backend-supplied links land. Give .nav-link a
real hit target (0.15em / 0.35em padding) + a subtle hover so the
icons read as interactive.
This commit is contained in:
iris 2026-05-23 02:43:12 +02:00
parent 2c087f53ed
commit 5887111327
2 changed files with 26 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
hive-c0re/assets/app.js
View file

@ -662,7 +662,7 @@
: lnk.kind === 'external' ? (lnk.url || '') : lnk.kind === 'external' ? (lnk.url || '')
: /* container */ containerBase + (lnk.url || ''); : /* container */ containerBase + (lnk.url || '');
const a = el('a', { const a = el('a', {
class: 'meta nav-link', class: 'nav-link',
href, href,
target: '_blank', target: '_blank',
rel: 'noopener', rel: 'noopener',

25
hive-c0re/assets/dashboard.css
View file

@ -134,6 +134,31 @@ a:hover {
font-weight: bold; font-weight: bold;
} }
.container-row .head .meta { margin-left: auto; } .container-row .head .meta { margin-left: auto; }
/* Icon-only nav strip in the head row — the per-container backend-
supplied link list (issue #262). Inline-flex + gap so a longer list
(e.g. with `dashboardLinks` extras) doesn't cram (issue #333). Each
link gets a comfortable hit target with a subtle hover so the
icons read as interactive rather than decorative. */
.container-row .head .nav-strip {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35em;
}
.nav-link {
color: var(--muted);
font-size: 0.95em;
line-height: 1;
padding: 0.15em 0.35em;
border-radius: 3px;
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease;
}
.nav-link:hover {
background: rgba(203, 166, 247, 0.12);
color: var(--cyan);
text-shadow: 0 0 6px rgba(137, 220, 235, 0.5);
}
.container-row .actions { .container-row .actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;