Merge pull request #60 from R0m1k3/1.1

Improve layout responsiveness and remove duplicate scrollbars

client/src/components/Layout.tsx

@@ -91,10 +91,10 @@ export default function Layout({ children }: LayoutProps) {
         {!isMobile && <Sidebar />}
         
         <main className={`flex-1 flex flex-col overflow-hidden ${
-          isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-72 xl:ml-80'
+          isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-64'
         }`}>
           {/* Header with store selector for admin */}
-          <header className="h-20 xl:h-24 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6 sm:px-8 xl:px-12">
+          <header className="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6">
             <div className="flex items-center gap-4">
               {/* Mobile menu button */}
               {isMobile && (
@@ -107,7 +107,7 @@ export default function Layout({ children }: LayoutProps) {
                   {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                 </Button>
               )}
-              <h1 className="text-xl xl:text-2xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
+              <h1 className="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
             </div>
 
             {/* Store selector for admin - moved to top right */}
@@ -168,12 +168,8 @@ export default function Layout({ children }: LayoutProps) {
           </header>
 
           {/* Main content area */}
-          <div className="flex-1 bg-gray-50 dark:bg-gray-900 p-6 sm:p-8 xl:p-12 overflow-y-auto">
-            <div className="container-responsive">
-              <div className="desktop-spacing">
-                {children}
-              </div>
-            </div>
+          <div className="flex-1 bg-gray-50 dark:bg-gray-900 overflow-hidden">
+            {children}
           </div>
         </main>
         

client/src/components/Sidebar.tsx

@@ -259,13 +259,13 @@ export default function Sidebar() {
   }
 
   return (
-    <aside className={`${isCollapsed ? 'w-16' : 'w-72 xl:w-80'} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col shadow-xl transition-all duration-300 ease-in-out`}>
+    <aside className={`${isCollapsed ? 'w-16' : 'w-64'} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col shadow-lg transition-all duration-300 ease-in-out`}>
       {/* Logo et bouton de collapse */}
-      <div className="h-20 xl:h-24 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 xl:px-6">
+      <div className="h-16 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4">
         {!isCollapsed && (
           <div className="flex items-center space-x-3">
             <Store className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-            <span className="text-xl xl:text-2xl font-bold text-gray-900 dark:text-gray-100">LogiFlow</span>
+            <span className="text-lg font-bold text-gray-900 dark:text-gray-100">LogiFlow</span>
           </div>
         )}
         {isCollapsed && (
@@ -290,8 +290,8 @@ export default function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 py-6 xl:py-8 px-4 xl:px-6">
-        <div className="space-y-2 xl:space-y-3">
+      <nav className="flex-1 py-4 px-4 overflow-y-auto">
+        <div className="space-y-1">
           {menuItems.map((item) => {
             const hasRolePermission = hasPermission(item.roles);
             // console.log(`🔍 Menu item ${item.path} (${item.label}):`, { 
@@ -374,7 +374,7 @@ export default function Sidebar() {
               </h3>
             </div>
           )}
-          <div className="space-y-2 xl:space-y-3">
+          <div className="space-y-1">
             {adminItems.map((item) => {
               if (!hasPermission(item.roles)) return null;
               

client/src/pages/CustomerOrders.tsx

@@ -674,7 +674,8 @@ export default function CustomerOrders() {
   } = usePagination(sortedOrders, 10);
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="h-full overflow-y-auto">
+      <div className="p-6 space-y-6">
       {/* Header */}
       <div className="bg-white border-b border-gray-200 p-6 shadow-sm -m-6 mb-6">
         <div className="flex items-center justify-between">
@@ -984,5 +985,6 @@ export default function CustomerOrders() {
         isLoading={deleteMutation.isPending}
       />
     </div>
+    </div>
   );
 }

client/src/pages/Dashboard.tsx

@@ -218,7 +218,8 @@ export default function Dashboard() {
   };
 
   return (
-    <div className="flex-1 space-y-6 p-6">
+    <div className="h-full overflow-y-auto">
+      <div className="p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -565,5 +566,6 @@ export default function Dashboard() {
         </Card>
       </div>
     </div>
+    </div>
   );
 }

client/src/pages/Deliveries.tsx

@@ -255,7 +255,8 @@ export default function Deliveries() {
   const canValidate = permissions.canValidate('deliveries');
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="h-full overflow-y-auto">
+      <div className="p-6 space-y-6">
       {/* Header */}
       <div className="bg-white border-b border-gray-200 p-6 shadow-sm -m-6 mb-6">
         <div className="flex items-center justify-between">
@@ -523,6 +524,7 @@ export default function Deliveries() {
         itemName={deliveryToDelete ? `${deliveryToDelete.supplier?.name} - ${safeFormat(deliveryToDelete.scheduledDate, 'dd/MM/yyyy')}` : undefined}
         isLoading={deleteMutation.isPending}
       />
+      </div>
     </div>
   );
 }

client/src/pages/Orders.tsx

@@ -226,7 +226,8 @@ export default function Orders() {
   const canDelete = permissions.canDelete('orders');
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="h-full overflow-y-auto">
+      <div className="p-6 space-y-6">
       {/* Header */}
       <div className="bg-white border-b border-gray-200 p-6 shadow-sm -m-6 mb-6">
         <div className="flex items-center justify-between">
@@ -461,6 +462,7 @@ export default function Orders() {
         itemName={orderToDelete ? `${orderToDelete.supplier?.name} - ${safeFormat(orderToDelete.plannedDate, 'dd/MM/yyyy')}` : undefined}
         isLoading={deleteMutation.isPending}
       />
+      </div>
     </div>
   );
 }