From 2396eaab4d31636ada3cee2eb5239e20be544b21 Mon Sep 17 00:00:00 2001
From: Paperclip <noreply@paperclip.ing>
Date: Sun, 12 Apr 2026 02:07:04 +0000
Subject: [PATCH] fix(GRO-564): wrap admin nav links in scrollable div to
 prevent logout overflow

- Add flexShrink:0 to logo div to prevent shrinking
- Wrap Book + NAV_LINKS in scrollable div with overflow-x:auto, flex:1, minWidth:0
- Add flexShrink:0 to all nav links
- Move logout button outside scrollable div with flexShrink:0 instead of marginLeft:auto
- Keeps logout button always visible regardless of nav item count

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/App.tsx | 90 ++++++++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 11a436c..28bde7c 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -210,6 +210,7 @@ function AdminLayout() {
           alignItems: "center",
           gap: 8,
           marginRight: "1.25rem",
+          flexShrink: 0,
         }}>
           {logoSrc && (
             <img src={logoSrc} alt="" style={{ width: 24, height: 24, objectFit: "contain" }} />
@@ -223,52 +224,61 @@ function AdminLayout() {
           </strong>
         </div>
         <GlobalSearch />
-        <Link
-          to="/admin/book"
-          style={{
-            padding: "0.4rem 0.85rem",
-            borderRadius: 6,
-            textDecoration: "none",
-            fontSize: 13,
-            fontWeight: 600,
-            color: "#fff",
-            background: branding.primaryColor,
-            marginRight: "0.5rem",
-            boxShadow: "0 1px 2px rgba(79, 138, 111, 0.3)",
-          }}
-        >
-          Book
-        </Link>
-        {NAV_LINKS.map(({ to, label }) => {
-          const active =
-            to === "/admin"
-              ? location.pathname === "/admin"
-              : location.pathname.startsWith(to);
-          return (
-            <Link
-              key={to}
-              to={to}
-              style={{
-                padding: "0.4rem 0.75rem",
-                borderRadius: 6,
-                textDecoration: "none",
-                fontSize: 13,
-                fontWeight: active ? 600 : 500,
-                color: active ? "#2d6a4f" : "#4b5563",
-                background: active ? "#ecfdf5" : "transparent",
-              }}
-            >
-              {label}
-            </Link>
-          );
-        })}
+        <div style={{
+          display: "flex",
+          overflowX: "auto",
+          flex: 1,
+          minWidth: 0,
+          gap: "0.25rem",
+        }}>
+          <Link
+            to="/admin/book"
+            style={{
+              padding: "0.4rem 0.85rem",
+              borderRadius: 6,
+              textDecoration: "none",
+              fontSize: 13,
+              fontWeight: 600,
+              color: "#fff",
+              background: branding.primaryColor,
+              boxShadow: "0 1px 2px rgba(79, 138, 111, 0.3)",
+              flexShrink: 0,
+            }}
+          >
+            Book
+          </Link>
+          {NAV_LINKS.map(({ to, label }) => {
+            const active =
+              to === "/admin"
+                ? location.pathname === "/admin"
+                : location.pathname.startsWith(to);
+            return (
+              <Link
+                key={to}
+                to={to}
+                style={{
+                  padding: "0.4rem 0.75rem",
+                  borderRadius: 6,
+                  textDecoration: "none",
+                  fontSize: 13,
+                  fontWeight: active ? 600 : 500,
+                  color: active ? "#2d6a4f" : "#4b5563",
+                  background: active ? "#ecfdf5" : "transparent",
+                  flexShrink: 0,
+                }}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </div>
         <button
           onClick={async () => {
             await signOut();
             navigate("/login");
           }}
           style={{
-            marginLeft: "auto",
+            flexShrink: 0,
             padding: "0.4rem 0.85rem",
             borderRadius: 6,
             border: "1px solid #e2e8f0",