updates on the scroll fix

src/pages/nearle/orders/orders.js

@@ -343,9 +343,11 @@ const Orders = () => {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'),
+        // The page (viewport) is now the scroll container, not the table.
-        rootMargin: '0px',
+        // Prefetch the next page ~400px before the sentinel reaches the bottom.
-        threshold: 1.0
+        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,
+            // Single page scroll: the table is NOT height-capped, so it renders at its
-            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 290px)' },
+            // full height and the whole page scrolls as one. Scrolling down moves the
-            overflow: 'auto',
+            // 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),

src/pages/nearle/reports/ordersDetails.js

@@ -445,9 +445,11 @@ export default function OrdersDetails() {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'),
+        // The page (viewport) is now the scroll container, not the table.
-        rootMargin: '0px',
+        // Prefetch the next page ~400px before the sentinel reaches the bottom.
-        threshold: 1.0
+        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.
+            // Single page scroll: the table is NOT height-capped, so it renders at its
-            // The table now claims everything else so operators see many more rows at once.
+            // full height and the whole page scrolls as one. Scrolling down moves the
-            minHeight: 320,
+            // KPI cards + header + filter bar off-screen and reveals the full table.
-            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 300px)' },
+            // Only horizontal overflow scrolls inside the container (for wide column sets).
-            overflow: 'auto',
+            overflowX: 'auto',
+            overflowY: 'visible',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: edge(BRAND),