From 5887111327d538b95e31755c5bf88ee5aa74c2d2 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sat, 23 May 2026 02:43:12 +0200
Subject: [PATCH] dashboard: stop nav-link icons cramming against the head
 row's right edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 hive-c0re/assets/app.js        |  2 +-
 hive-c0re/assets/dashboard.css | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/hive-c0re/assets/app.js b/hive-c0re/assets/app.js
index b31bdd1..b529b00 100644
--- a/hive-c0re/assets/app.js
+++ b/hive-c0re/assets/app.js
@@ -662,7 +662,7 @@
                        : lnk.kind === 'external' ? (lnk.url || '')
                        : /* container */            containerBase + (lnk.url || '');
             const a = el('a', {
-              class: 'meta nav-link',
+              class: 'nav-link',
               href,
               target: '_blank',
               rel: 'noopener',
diff --git a/hive-c0re/assets/dashboard.css b/hive-c0re/assets/dashboard.css
index e61c007..6a96df7 100644
--- a/hive-c0re/assets/dashboard.css
+++ b/hive-c0re/assets/dashboard.css
@@ -134,6 +134,31 @@ a:hover {
   font-weight: bold;
 }
 .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 {
   display: flex;
   flex-wrap: wrap;