Merge pull request #151 from R0m1k3/1.1

Improve layout and remove unnecessary scrollbars from the application

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="layout-container flex h-screen overflow-hidden bg-gray-50">
+      <div className="layout-container flex 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 max-w-full">
+        <main className="flex-1 flex flex-col h-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,10 +157,8 @@ export default function Layout({ children }: LayoutProps) {
             )}
           </header>
 
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-gray-50 p-6 max-w-full">
+          <div className="flex-1 bg-gray-50 p-6 h-full overflow-y-auto">
-            <div className="max-w-full overflow-x-hidden">
+            {children}
-              {children}
-            </div>
           </div>
         </main>
       </div>

client/src/index.css

@@ -115,22 +115,20 @@
     display: none;
   }
   
-  /* Solution simple et directe pour masquer l'ascenseur horizontal */
+  /* Solution pour masquer l'ascenseur vertical de droite */
-  ::-webkit-scrollbar:horizontal {
+  html, body {
-    display: none !important;
+    height: 100%;
-  }
+    overflow: hidden !important;
-  
-  html {
-    overflow-x: hidden !important;
-    scrollbar-width: none;
-  }
-  
-  body {
-    overflow-x: hidden !important;
   }
   
   #root {
-    overflow-x: hidden !important;
+    height: 100%;
+    overflow: hidden !important;
+  }
+  
+  .layout-container {
+    height: 100vh;
+    overflow: hidden !important;
   }
   
   .bg-secondary {

replit.md

@@ -33,6 +33,7 @@ The platform is built with a clear separation of concerns, utilizing a modern fu
 - **Order and Delivery Management:** Full CRUD operations for orders and deliveries, including linking orders to deliveries and managing their statuses.
 - **Reconciliation:** Functionality for reconciling Bills of Lading (BL) and invoices with immediate UI updates.
 - **Invoice Verification Cache:** Robust caching system for invoice verification results with automatic expiration and conflict resolution. Enhanced with unique constraint handling and graceful error management for production stability (August 2025).
+- **UI Scrollbar Optimization:** Eliminated redundant vertical scrollbar on the right side of the screen while preserving necessary internal page scrolling. Implemented global CSS rules with `overflow: hidden` on html/body/root and Layout height management to prevent vertical overflow issues in production (August 2025).
 - **User and Permission Management:** Granular access controls ensuring that users (e.g., employees) have appropriate permissions for tasks like creating customer orders.
 - **Reporting:** Statistical reporting, including monthly summaries of deliveries based on `deliveredDate`.