Merge pull request #63 from R0m1k3/1.1

Fix sidebar display and scrolling issues on smaller screens

client/src/components/Layout.tsx

@@ -73,7 +73,7 @@ export default function Layout({ children }: LayoutProps) {
       mobileMenuOpen, 
       setMobileMenuOpen 
     }}>
-      <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-900">
+      <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
         {/* Mobile Sidebar Overlay */}
         {isMobile && mobileMenuOpen && (
           <>

client/src/components/Sidebar.tsx

@@ -259,7 +259,7 @@ export default function Sidebar() {
   }
 
   return (
-    <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`}>
+    <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 h-screen`}>
       {/* Logo et bouton de collapse */}
       <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 && (
@@ -316,7 +316,7 @@ export default function Sidebar() {
                   title={isCollapsed ? item.label : undefined}
                   onClick={handleLinkClick}
                 >
-                  <Icon className={`h-4 w-4 ${isCollapsed ? '' : 'mr-3'}`} />
+                  <Icon className={`${isCollapsed ? 'h-5 w-5' : 'h-4 w-4 mr-3'}`} />
                   {!isCollapsed && item.label}
                 </div>
               </Link>
@@ -353,7 +353,7 @@ export default function Sidebar() {
                       title={isCollapsed ? item.label : undefined}
                       onClick={handleLinkClick}
                     >
-                      <Icon className={`h-4 w-4 ${isCollapsed ? '' : 'mr-3'}`} />
+                      <Icon className={`${isCollapsed ? 'h-5 w-5' : 'h-4 w-4 mr-3'}`} />
                       {!isCollapsed && item.label}
                     </div>
                   </Link>
@@ -392,7 +392,7 @@ export default function Sidebar() {
                     title={isCollapsed ? item.label : undefined}
                     onClick={handleLinkClick}
                   >
-                    <Icon className={`h-4 w-4 ${isCollapsed ? '' : 'mr-3'}`} />
+                    <Icon className={`${isCollapsed ? 'h-5 w-5' : 'h-4 w-4 mr-3'}`} />
                     {!isCollapsed && item.label}
                   </div>
                 </Link>

client/src/pages/CustomerOrders.tsx

@@ -674,7 +674,7 @@ export default function CustomerOrders() {
   } = usePagination(sortedOrders, 10);
 
   return (
-    <div className="flex-1">
+    <div className="flex-1 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">
@@ -753,7 +753,6 @@ export default function CustomerOrders() {
           {isLoading ? (
             <div>Chargement...</div>
           ) : (
-            <div className="max-h-96 overflow-y-auto">
               <Table>
               <TableHeader>
                 <TableRow>
@@ -868,7 +867,6 @@ export default function CustomerOrders() {
                 ))}
               </TableBody>
             </Table>
-            </div>
           )}
           
           {/* Pagination */}

client/src/pages/Dashboard.tsx

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

client/src/pages/Deliveries.tsx

@@ -255,7 +255,7 @@ export default function Deliveries() {
   const canValidate = permissions.canValidate('deliveries');
 
   return (
-    <div className="flex-1">
+    <div className="flex-1 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">
@@ -340,7 +340,7 @@ export default function Deliveries() {
           </div>
         ) : (
           <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-xl">
-            <div className="overflow-x-auto max-h-96 overflow-y-auto">
+            <div className="overflow-x-auto">
               <table className="w-full">
                 <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>

client/src/pages/Orders.tsx

@@ -226,7 +226,7 @@ export default function Orders() {
   const canDelete = permissions.canDelete('orders');
 
   return (
-    <div className="flex-1">
+    <div className="flex-1 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">
@@ -309,7 +309,7 @@ export default function Orders() {
           </div>
         ) : (
           <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-xl">
-            <div className="overflow-x-auto max-h-96 overflow-y-auto">
+            <div className="overflow-x-auto">
               <table className="w-full">
                 <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>