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>