Improve layout responsiveness by hiding horizontal scrollbars

Adjust CSS in layout components and global styles to prevent horizontal overflow and hide scrollbars across the application, ensuring a cleaner user interface, especially on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/IhbIRSa

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">
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 p-6 max-w-full">
-            {children}
+            <div className="max-w-full overflow-x-hidden">
+              {children}
+            </div>
           </div>
         </main>
       </div>

client/src/index.css

@@ -60,9 +60,15 @@
     @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);
   }