change carousel and productlist filter

package-lock.json

@@ -27,7 +27,7 @@
         "react-dom": "^18.3.1",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.0.2",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "shopify-api-node": "^3.14.0",
         "swiper": "^11.1.4",
         "web-vitals": "^2.1.4"

package.json

@@ -22,13 +22,13 @@
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "shopify-api-node": "^3.14.0",
     "swiper": "^11.1.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "set GENERATE_SOURCEMAP=false && react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/components/Carousel/Carousel.jsx

@@ -38,7 +38,6 @@ const Carousel = () => {
         justifyContent: "center",
         width: "100%",
         objectPosition: "top center",
-        height: "100vh",
         overflow: "hidden",
       }}
     >
@@ -59,12 +58,6 @@ const Carousel = () => {
           src={item.img_src}
           alt={item.alt_name}
           sx={{
-            display: {
-              xs:"none",
-              sm:"none",
-              md:"block",
-              lg:"block"
-            },
             width: "100%",
             height: "100%",
             backgroundImage: `url(${item.img_src})`,
@@ -74,28 +67,7 @@ const Carousel = () => {
         />
       ))}
 
-      {/* Mobile View - Cause the image keep getting wrong offest */}
-      {items_mobile.map((item, index) => (
-        <Box
-          key={index}
-          component="img"
-          src={item.img_src}
-          alt={item.alt_name}
-          sx={{
-            display: {
-              xs:"block",
-              sm:"block",
-              md:"none",
-              lg:"none"
-            },
-            width: "100%",
-            height: "100%",
-            backgroundImage: `url(${item.img_src})`,
-            objectFit: "cover",
-            objectPosition: "center center",
-          }}
-        />
-      ))}
+
 
     </Box>
   );

src/components/ProductList/ProductList.jsx

@@ -254,12 +254,7 @@ const ProductList = ({ size = 99999 }) => {
 
         {/* Right Side: Option Inputs */}
         <Box sx={{
-          display: "flex", gap: 2, flexDirection: {
-            xs: "column",
-            sm: "row",
-            md: "row",
-            lg: "row"
-          },
+          display: "flex", gap: 2, flexDirection: "row", flexWrap:"wrap"
         }}>
 
           {(tagFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">