From b78730a9a5061f73be6fc54472680554145d6787 Mon Sep 17 00:00:00 2001
From: dharaneesh-r <dharaneesh@tenext.in>
Date: Fri, 5 Jun 2026 08:42:26 +0530
Subject: [PATCH] updates on the scroll fix

---
 src/pages/nearle/orders/orders.js         | 17 +++++++++++------
 src/pages/nearle/reports/ordersDetails.js | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js
index b8d66e1..ae770b1 100644
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -343,9 +343,11 @@ const Orders = () => {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'),
-        rootMargin: '0px',
-        threshold: 1.0
+        // The page (viewport) is now the scroll container, not the table.
+        // Prefetch the next page ~400px before the sentinel reaches the bottom.
+        root: null,
+        rootMargin: '0px 0px 400px 0px',
+        threshold: 0
       }
     );
     if (loadMoreRef.current) observer.observe(loadMoreRef.current);
@@ -937,9 +939,12 @@ const Orders = () => {
           onScroll={handleScroll}
           ref={containerRef}
           sx={{
-            minHeight: 320,
-            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 290px)' },
-            overflow: 'auto',
+            // Single page scroll: the table is NOT height-capped, so it renders at its
+            // full height and the whole page scrolls as one. Scrolling down moves the
+            // KPI cards + header + filter bar off-screen and reveals the full table.
+            // Only horizontal overflow scrolls inside the container (for wide column sets).
+            overflowX: 'auto',
+            overflowY: 'visible',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: edge(BRAND),
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index 619e323..57146ad 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -445,9 +445,11 @@ export default function OrdersDetails() {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'),
-        rootMargin: '0px',
-        threshold: 1.0
+        // The page (viewport) is now the scroll container, not the table.
+        // Prefetch the next page ~400px before the sentinel reaches the bottom.
+        root: null,
+        rootMargin: '0px 0px 400px 0px',
+        threshold: 0
       }
     );
     if (loadMoreRef.current) observer.observe(loadMoreRef.current);
@@ -1033,11 +1035,12 @@ export default function OrdersDetails() {
           ref={containerRef}
           onScroll={handleScroll}
           sx={{
-            // After compacting header + KPIs + filter bar, ~300px of chrome is reserved.
-            // The table now claims everything else so operators see many more rows at once.
-            minHeight: 320,
-            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 300px)' },
-            overflow: 'auto',
+            // Single page scroll: the table is NOT height-capped, so it renders at its
+            // full height and the whole page scrolls as one. Scrolling down moves the
+            // KPI cards + header + filter bar off-screen and reveals the full table.
+            // Only horizontal overflow scrolls inside the container (for wide column sets).
+            overflowX: 'auto',
+            overflowY: 'visible',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: edge(BRAND),