add image close button and scroll image list

src/components/ImageView/ImageView.jsx

   DialogContent,
 } from "@mui/material";
 import Grid from '@mui/material/Grid2';
+import CloseIcon from "@mui/icons-material/Close";
 import defaultImage from "../../assets/images/default.png"
 
 // Utility function to check if an object is empty
               component="img"
               alt="Preview"
               sx={{
-                width:{
-                  xs:"100%",
-                  sm:"100%",
-                  md:"70%"
+                width: {
+                  xs: "100%",
+                  sm: "100%",
+                  md: "70%"
                 },
                 height: "auto",
                 display: "block",
               display: "flex",
               flexDirection: "row",
               justifyContent: {
-                xs:"left",
-                sm:"left",
-                md:"center"
+                xs: "left",
+                sm: "left",
+                md: "center"
               },
-              flexWrap:"wrap",
+              overflowX: "scroll",
+              overflowY: "none",
               padding: 2,
               gap: 2
             }}
 
       {/* Zoom Dialog */}
       <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
-        <DialogContent>
+        <DialogContent sx={{ position: "relative" }}>
           <img
             src={previewImage || defaultImage}
             alt="Zoomed Preview"
               height: "auto",
             }}
           />
+          <Box sx={{ width: 50, height: 50, position: "absolute", top: 10, right: 10 }}>
+            <IconButton
+              onClick={handleZoomToggle}
+              sx={{
+                backgroundColor: "white",
+                color: "black",
+                "&:hover": {
+                  backgroundColor: "lightgray",
+                },
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
         </DialogContent>
       </Dialog>
     </Box>

src/services/ProductService.js

           currencyCode
         }
       }
-      images(first: 4) {
+      images(first: 250) {
         nodes {
           url
         }