From 05b398c352fc76d79eedb9f9be8743a9f8dcc4cb Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 22:24:41 -0400
Subject: [PATCH] fix(ui): TopNav side cells use flex: 1 1 0 (equal weight) so
 middle link block stays centered regardless of action-slot content

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TopNav.vue | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index e95bf1a..b2d7939 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -55,13 +55,16 @@ const health = computed(() => {
   position: sticky;
   top: 0;
   z-index: 1000;
-  /* Mirrored side columns (1fr / auto / 1fr) keep the link block dead-
-     centered no matter what the teleport-slot on the right is rendering
-     for the active view (Gallery: Select, Showcase: Shuffle, others: ∅).
-     With a plain flex layout the links shifted left as soon as actions
-     appeared. */
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  /* Both side cells use `flex: 1 1 0` — equal flex weight, basis 0 —
+     so they grow/shrink at the same rate regardless of which one has
+     content (brand vs. teleport-slot action button). The middle cell
+     is `flex: 0 0 auto` (content width), and because the side cells
+     are symmetric, the middle stays geometrically centered. Earlier
+     attempts: `flex: 1` defaults to basis 0%, which made the centered
+     links shift when actions appeared; `grid-template-columns: 1fr
+     auto 1fr` actually means `minmax(auto, 1fr)` so a wide brand
+     pushed the link block off-center on narrow viewports. */
+  display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
@@ -93,6 +96,7 @@ const health = computed(() => {
 }
 
 .fc-links {
+  flex: 0 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -119,11 +123,12 @@ const health = computed(() => {
 }
 
 .fc-nav-left {
+  flex: 1 1 0;
+  min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 8px;
-  flex-shrink: 0;
-  justify-self: start;
 }
 .fc-health {
   display: flex;
@@ -131,10 +136,11 @@ const health = computed(() => {
   flex-shrink: 0;
 }
 .fc-nav-actions {
+  flex: 1 1 0;
+  min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 0.5rem;
-  flex-shrink: 0;
-  justify-self: end;
 }
 </style>