From aa3e62d0ff2eb9b39b510c2bca6a36eabb842fb9 Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Fri, 12 Jun 2026 12:14:40 +0330
Subject: [PATCH] Make the mobile dashboard sidebar scrollable.

The mobile drawer rendered the nav at full height below a fixed header,
so lower items (and the admin section) overflowed off-screen with no way
to scroll. Lay the drawer out as a flex column with a fixed header, a
scrollable nav area (min-h-0 + overflow-y-auto) and a pinned user footer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/app/[lang]/dashboard/layout.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/[lang]/dashboard/layout.tsx b/frontend/src/app/[lang]/dashboard/layout.tsx
index ac67e45..57209e7 100644
--- a/frontend/src/app/[lang]/dashboard/layout.tsx
+++ b/frontend/src/app/[lang]/dashboard/layout.tsx
@@ -156,7 +156,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   const SidebarContent = () => (
     <div className="flex flex-col h-full">
-      <div className="space-y-1 flex-1">
+      <div className="space-y-1 flex-1 min-h-0 overflow-y-auto">
         {userNavItems.map((item) => (
           <NavLink key={item.href} item={item} badge={getBadge(item.href)} />
         ))}
@@ -202,7 +202,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       </div>
 
       {/* Sidebar footer */}
-      <div className="pt-4 mt-4 border-t border-gray-200">
+      <div className="pt-4 mt-4 border-t border-gray-200 shrink-0">
         <div className="px-3 py-2">
           <p className="text-xs font-semibold text-gray-700 truncate">
             {user?.firstName} {user?.lastName}
@@ -226,11 +226,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
       {/* Mobile sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-50 w-64 bg-white border-r rtl:border-r-0 rtl:border-l border-gray-200 p-4 transform transition-transform duration-200 ease-in-out lg:hidden ${
+        className={`fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-50 w-64 bg-white border-r rtl:border-r-0 rtl:border-l border-gray-200 p-4 flex flex-col transform transition-transform duration-200 ease-in-out lg:hidden ${
           sidebarOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full'
         }`}
       >
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6 shrink-0">
           <Link href="/dashboard" className="text-lg font-bold text-primary-600">
             <Cloud className="w-5 h-5 inline mr-1 rtl:mr-0 rtl:ml-1" /> {t.common.appName}
           </Link>
@@ -238,7 +238,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             <X className="w-4 h-4" />
           </button>
         </div>
-        <SidebarContent />
+        <div className="flex-1 min-h-0">
+          <SidebarContent />
+        </div>
       </aside>
 
       {/* Header */}