From 7af9c0d7cac0e679f8ee718bf7e91604ecc68ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 10:39:12 +0100
Subject: [PATCH] fix: fix admin mobile nav overflow breaking layout on small
 screens

Mobile nav now scrolls horizontally with hidden scrollbar; nav items
don't shrink and show icon-only on xs, icon+label on sm and up.
Added scrollbar-none utility to app.css.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/app.css                 |  7 ++++
 .../frontend/src/routes/admin/+layout.svelte  | 36 ++++++++++---------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/app.css b/packages/frontend/src/app.css
index 7af7275..897a5f3 100644
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -3,6 +3,13 @@
 
 @plugin "@iconify/tailwind4";
 
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @custom-variant hover (&:hover);
diff --git a/packages/frontend/src/routes/admin/+layout.svelte b/packages/frontend/src/routes/admin/+layout.svelte
index c3c791c..5796d7d 100644
--- a/packages/frontend/src/routes/admin/+layout.svelte
+++ b/packages/frontend/src/routes/admin/+layout.svelte
@@ -24,26 +24,28 @@
 <div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
   <div class="container mx-auto px-4">
     <!-- Mobile top nav -->
-    <div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
-      <a
-        href="/"
-        class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2"
-      >
-        {$_("admin.nav.back_mobile")}
-      </a>
-      {#each navLinks as link (link.href)}
+    <div class="lg:hidden border-b border-border/40">
+      <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
         <a
-          href={link.href}
-          class={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-            isActive(link.href)
-              ? "bg-primary/10 text-primary"
-              : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-          }`}
+          href="/"
+          class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
         >
-          <span class={`${link.icon} h-4 w-4`}></span>
-          {link.name}
+          {$_("admin.nav.back_mobile")}
         </a>
-      {/each}
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
+              isActive(link.href)
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            }`}
+          >
+            <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
+            <span class="hidden sm:inline">{link.name}</span>
+          </a>
+        {/each}
+      </div>
     </div>
 
     <!-- Desktop layout -->