From 7fa7f33bcc9381532f026758bc5e14f09e1bc8a2 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Fri, 19 Jun 2026 14:10:55 +0100
Subject: [PATCH] Fix misaligned navbar items in collapsed (hamburger) menu

Plain nav links centred via text-align; dropdown toggle buttons
(which don't stretch to fill their container like <a> does) centred
by making .nav-item a flex container with justify-content: center.
Scoped to the lg breakpoint (max-width: 991.98px) so the desktop
navbar layout is unaffected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client-v3/src/App.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client-v3/src/App.vue b/client-v3/src/App.vue
index e2aef2e7..cd26e093 100644
--- a/client-v3/src/App.vue
+++ b/client-v3/src/App.vue
@@ -424,6 +424,17 @@ async function goToLivePage(): Promise<void> {
   text-align: center;
 }
 
+@media (max-width: 991.98px) {
+  .navbar-nav .nav-item {
+    display: flex;
+    justify-content: center;
+  }
+
+  .navbar-nav .nav-link {
+    text-align: center;
+  }
+}
+
 div.center-spinner {
   position: fixed;
   top: 50%;