From c453cb395e9816eb1e72236ef8382e786b337225 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Sat, 4 Jul 2026 11:05:34 +0200
Subject: [PATCH] fix: admin layout mobile responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same issue as settings — fixed w-56 vertical sidebar with no
breakpoint squeezed all admin pages into a sliver on mobile. Horizontal
scrollable tab bar under md, normal sidebar above; "Back to app" moves
into the header row on mobile since the desktop footer placement is
hidden there.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/app/admin/layout.tsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
index 510656a..3176231 100644
--- a/apps/web/app/admin/layout.tsx
+++ b/apps/web/app/admin/layout.tsx
@@ -27,19 +27,28 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   if (dbUser?.role !== "admin") redirect("/recipes");
 
   return (
-    <div className="flex min-h-screen">
-      <aside className="w-56 border-r bg-muted/30 flex flex-col sticky top-0 h-screen">
-        <div className="flex items-center gap-2 p-4 border-b font-semibold">
-          <Shield className="h-4 w-4 text-destructive" />
-          Admin
+    <div className="flex flex-col md:flex-row min-h-screen">
+      <aside className="w-full md:w-56 md:shrink-0 border-b md:border-b-0 md:border-r bg-muted/30 flex flex-col md:sticky md:top-0 md:h-screen">
+        <div className="flex items-center justify-between gap-2 p-4 border-b font-semibold">
+          <span className="flex items-center gap-2">
+            <Shield className="h-4 w-4 text-destructive" />
+            Admin
+          </span>
+          <Link
+            href="/recipes"
+            className="md:hidden flex items-center gap-1 text-xs font-normal text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            Back to app
+          </Link>
         </div>
-        <nav className="flex flex-col gap-1 p-2 flex-1">
+        <nav className="flex overflow-x-auto gap-1 p-2 md:flex-col md:overflow-visible md:flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {adminNav.map(({ href, label, icon: Icon }) => (
             <Link
               key={href}
               href={href}
               className={cn(
-                "flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap shrink-0 md:shrink transition-colors",
                 "hover:bg-accent hover:text-accent-foreground"
               )}
             >
@@ -48,7 +57,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
             </Link>
           ))}
         </nav>
-        <div className="p-2 border-t">
+        <div className="p-2 border-t hidden md:block">
           <Link
             href="/recipes"
             className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
@@ -58,7 +67,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
           </Link>
         </div>
       </aside>
-      <main className="flex-1 p-8 overflow-auto">{children}</main>
+      <main className="flex-1 p-4 md:p-8 overflow-auto min-w-0">{children}</main>
     </div>
   );
 }