From 5d56b493408123880197df648744d6b755280569 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 15 Aug 2025 10:55:07 +0000
Subject: [PATCH] Improve layout and remove unnecessary scrollbars from the
 application

Refactor Layout component to manage height and remove horizontal scrollbar. Update global CSS to hide vertical scrollbars on html, body, and root elements.

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 | 10 ++++------
 client/src/index.css             | 24 +++++++++++-------------
 replit.md                        |  1 +
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 7bb834e..d25e48f 100644
--- a/client/src/components/Layout.tsx
+++ b/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="max-w-full overflow-x-hidden">
-              {children}
-            </div>
+          <div className="flex-1 bg-gray-50 p-6 h-full overflow-y-auto">
+            {children}
           </div>
         </main>
       </div>
diff --git a/client/src/index.css b/client/src/index.css
index 16b206b..62e9f72 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -115,22 +115,20 @@
     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;
+  /* Solution pour masquer l'ascenseur vertical de droite */
+  html, body {
+    height: 100%;
+    overflow: hidden !important;
   }
   
   #root {
-    overflow-x: hidden !important;
+    height: 100%;
+    overflow: hidden !important;
+  }
+  
+  .layout-container {
+    height: 100vh;
+    overflow: hidden !important;
   }
   
   .bg-secondary {
diff --git a/replit.md b/replit.md
index b4ff2cc..bfda649 100644
--- a/replit.md
+++ b/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`.