updates on the ui

src/pages/nearle/dispatch/Preview.js

@@ -301,6 +301,12 @@ const Preview = () => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, []);
   const [csvExportData, setCsvExportData] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [tabValue, setTabValue] = useState(0);
@@ -544,7 +550,17 @@ const Preview = () => {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden', position: 'relative' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
+        overflow: 'hidden',
+        position: 'relative',
+        mt: { xs: -2, sm: -3 },
+        mx: { xs: -2, sm: -3 }
+      }}
+    >
       <Backdrop
         sx={{ position: 'absolute', color: '#fff', zIndex: (theme) => theme.zIndex.modal + 1 }}
         open={isLoading}
@@ -557,7 +573,8 @@ const Preview = () => {
           py: 1.5,
           px: 2.5,
           borderBottom: '1px solid #e2e8f0',
-          background: 'linear-gradient(135deg, rgba(102,37,130,0.06) 0%, rgba(146,85,171,0.06) 100%)'
+          background: 'linear-gradient(135deg, rgba(102,37,130,0.06) 0%, rgba(146,85,171,0.06) 100%)',
+          flexShrink: 0
         }}
       >
         <Stack direction="row" alignItems="center" justifyContent="space-between">
@@ -580,6 +597,30 @@ const Preview = () => {
               Assign Orders
             </Typography>
           </Stack>
+
+          <Button
+            variant="contained"
+            onClick={handleFinalCreateDelivery}
+            sx={{
+              borderRadius: 999,
+              px: 3.5,
+              py: 0.875,
+              bgcolor: '#662582',
+              color: '#ffffff',
+              textTransform: 'none',
+              fontWeight: 800,
+              fontSize: 13,
+              boxShadow: '0 4px 14px rgba(102, 37, 130, 0.25)',
+              '&:hover': {
+                bgcolor: '#9255ab',
+                transform: 'translateY(-1px)',
+                boxShadow: '0 6px 20px rgba(102, 37, 130, 0.35)'
+              },
+              transition: 'all 0.2s'
+            }}
+          >
+            Assign Orders
+          </Button>
         </Stack>
       </Box>
 
@@ -599,60 +640,6 @@ const Preview = () => {
         )}
       </Box>
 
-      <Box
-        sx={{
-          px: 3,
-          py: 1.75,
-          borderTop: '1px solid #e2e8f0',
-          bgcolor: '#ffffff',
-          boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.03)'
-        }}
-      >
-        <Stack direction="row" gap={2} alignItems="center" justifyContent="end">
-          <Button
-            variant="outlined"
-            onClick={() => navigate(-1)}
-            sx={{
-              borderRadius: 999,
-              px: 3,
-              py: 1,
-              borderColor: '#e2e8f0',
-              color: '#64748b',
-              textTransform: 'none',
-              fontWeight: 700,
-              '&:hover': {
-                borderColor: '#cbd5e1',
-                bgcolor: '#f8fafc'
-              }
-            }}
-          >
-            Back
-          </Button>
-          <Button
-            variant="contained"
-            onClick={handleFinalCreateDelivery}
-            sx={{
-              borderRadius: 999,
-              px: 4,
-              py: 1,
-              bgcolor: '#662582',
-              color: '#ffffff',
-              textTransform: 'none',
-              fontWeight: 800,
-              boxShadow: '0 4px 14px rgba(102, 37, 130, 0.25)',
-              '&:hover': {
-                bgcolor: '#9255ab',
-                transform: 'translateY(-1px)',
-                boxShadow: '0 6px 20px rgba(102, 37, 130, 0.35)'
-              },
-              transition: 'all 0.2s'
-            }}
-          >
-            Assign Orders
-          </Button>
-        </Stack>
-      </Box>
-
       <Dialog open={changeDialogOpen} onClose={() => setChangeDialogOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontWeight: 700 }}>Change Rider</DialogTitle>
         <DialogContent>