Merge pull request #150 from R0m1k3/1.1

Improve layout responsiveness by hiding horizontal scrollbars

client/src/components/Layout.tsx

@@ -66,7 +66,7 @@ export default function Layout({ children }: LayoutProps) {
 
   return (
     <StoreContext.Provider value={{ selectedStoreId, setSelectedStoreId, stores, sidebarCollapsed, setSidebarCollapsed, mobileMenuOpen, setMobileMenuOpen }}>
-      <div className="flex h-screen overflow-hidden bg-gray-50">
+      <div className="layout-container flex h-screen overflow-hidden bg-gray-50">
         {/* Mobile overlay */}
         {isMobile && mobileMenuOpen && (
           <div 
@@ -77,7 +77,7 @@ export default function Layout({ children }: LayoutProps) {
         
         <Sidebar />
         
-        <main className="flex-1 flex flex-col overflow-hidden">
+        <main className="flex-1 flex flex-col overflow-hidden max-w-full">
           {/* Header with mobile menu and store selector */}
           <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 sm:px-6">
             <div className="flex items-center gap-4">
@@ -157,8 +157,10 @@ export default function Layout({ children }: LayoutProps) {
             )}
           </header>
 
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 p-6">
-            {children}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 p-6 max-w-full">
+            <div className="max-w-full overflow-x-hidden">
+              {children}
+            </div>
           </div>
         </main>
       </div>

client/src/index.css

@@ -59,10 +59,16 @@
   * {
     @apply border-border;
   }
-
-  body {
+  
+  html, body {
     @apply font-sans antialiased bg-surface text-foreground;
-    overflow-x: hidden;
+    overflow-x: hidden !important;
+    max-width: 100vw;
+  }
+  
+  #root {
+    overflow-x: hidden !important;
+    max-width: 100vw;
   }
 }
 
@@ -109,6 +115,24 @@
     display: none;
   }
   
+  /* Solution simple et directe pour masquer l'ascenseur horizontal */
+  ::-webkit-scrollbar:horizontal {
+    display: none !important;
+  }
+  
+  html {
+    overflow-x: hidden !important;
+    scrollbar-width: none;
+  }
+  
+  body {
+    overflow-x: hidden !important;
+  }
+  
+  #root {
+    overflow-x: hidden !important;
+  }
+  
   .bg-secondary {
     background-color: var(--secondary);
   }