From 51d36566d167bed8b8d33eb4236bb881c9d85642 Mon Sep 17 00:00:00 2001
From: AutonetSellCar Deploy <autonet@grantech.kr>
Date: Sat, 3 Jan 2026 12:11:36 +0900
Subject: [PATCH] Fix SidebarLayout mobile responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move mobile tabs outside flex container to prevent layout conflict
- Add sticky positioning for mobile tabs
- Add min-w-0 to main content to prevent overflow
- Reduce padding on mobile screens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/SidebarLayout.tsx | 50 +++++++++++------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/SidebarLayout.tsx b/frontend/src/components/SidebarLayout.tsx
index e69d9bd..386b4cb 100644
--- a/frontend/src/components/SidebarLayout.tsx
+++ b/frontend/src/components/SidebarLayout.tsx
@@ -22,9 +22,31 @@ export default function SidebarLayout({ children, groupKey }: SidebarLayoutProps
 
   return (
     <div className="min-h-screen bg-gray-50">
+      {/* Mobile Sidebar - horizontal tabs (outside flex container) */}
+      <div className="md:hidden w-full bg-white border-b shadow-sm sticky top-0 z-10">
+        <div className="flex overflow-x-auto">
+          {group.items.map((item) => {
+            const isActive = pathname === item.path || pathname.startsWith(item.path + '/');
+            return (
+              <Link
+                key={item.path}
+                href={item.path}
+                className={`flex-shrink-0 px-4 py-3 text-sm border-b-2 transition whitespace-nowrap ${
+                  isActive
+                    ? 'border-primary-500 text-primary-600 font-medium'
+                    : 'border-transparent text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                {getLabel(item.label)}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+
       <div className="flex">
-        {/* Sidebar */}
-        <aside className="w-56 bg-white shadow-md min-h-[calc(100vh-4rem)] hidden md:block">
+        {/* Desktop Sidebar */}
+        <aside className="w-56 bg-white shadow-md min-h-[calc(100vh-4rem)] hidden md:block flex-shrink-0">
           <div className="p-4">
             <h2 className="text-lg font-bold text-gray-800 mb-4 pb-2 border-b">
               {getLabel(group.label)}
@@ -50,30 +72,8 @@ export default function SidebarLayout({ children, groupKey }: SidebarLayoutProps
           </div>
         </aside>
 
-        {/* Mobile Sidebar - horizontal tabs */}
-        <div className="md:hidden w-full bg-white border-b shadow-sm">
-          <div className="flex overflow-x-auto">
-            {group.items.map((item) => {
-              const isActive = pathname === item.path || pathname.startsWith(item.path + '/');
-              return (
-                <Link
-                  key={item.path}
-                  href={item.path}
-                  className={`flex-shrink-0 px-4 py-3 text-sm border-b-2 transition ${
-                    isActive
-                      ? 'border-primary-500 text-primary-600 font-medium'
-                      : 'border-transparent text-gray-600 hover:text-gray-900'
-                  }`}
-                >
-                  {getLabel(item.label)}
-                </Link>
-              );
-            })}
-          </div>
-        </div>
-
         {/* Main Content */}
-        <main className="flex-1 p-6">
+        <main className="flex-1 p-3 sm:p-6 min-w-0">
           {children}
         </main>
       </div>