From 95bc761a6993ea14499bb2c8133c916a6d989df3 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:16:37 -0400
Subject: [PATCH] fix(ui): TopNav uses 1fr/auto/1fr grid so Gallery/Showcase
 action buttons don't shift the centered links

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

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index 4493050..e95bf1a 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -55,7 +55,13 @@ const health = computed(() => {
   position: sticky;
   top: 0;
   z-index: 1000;
-  display: flex;
+  /* 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;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
@@ -87,7 +93,6 @@ const health = computed(() => {
 }
 
 .fc-links {
-  flex: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -118,6 +123,7 @@ const health = computed(() => {
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
+  justify-self: start;
 }
 .fc-health {
   display: flex;
@@ -129,5 +135,6 @@ const health = computed(() => {
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  justify-self: end;
 }
 </style>