add image close button and scroll image list

src/components/ImageView/ImageView.jsx

@@ -8,6 +8,7 @@ import {
   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
@@ -53,10 +54,10 @@ const ImageView = () => {
               component="img"
               alt="Preview"
               sx={{
-                width:{
-                  xs:"100%",
-                  sm:"100%",
-                  md:"70%"
+                width: {
+                  xs: "100%",
+                  sm: "100%",
+                  md: "70%"
                 },
                 height: "auto",
                 display: "block",
@@ -73,11 +74,12 @@ const ImageView = () => {
               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
             }}
@@ -109,7 +111,7 @@ const ImageView = () => {
 
       {/* Zoom Dialog */}
       <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
-        <DialogContent>
+        <DialogContent sx={{ position: "relative" }}>
           <img
             src={previewImage || defaultImage}
             alt="Zoomed Preview"
@@ -118,6 +120,20 @@ const ImageView = () => {
               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

@@ -127,7 +127,7 @@ const getProduct = async (handle = "") => {
           currencyCode
         }
       }
-      images(first: 4) {
+      images(first: 250) {
         nodes {
           url
         }