change main header size, and new product filter

src/components/ProductList/ProductList.jsx

@@ -307,7 +307,11 @@ const ProductList = ({ size = 99999 }) => {
         sx={{
           display: "flex",
           justifyContent: "space-between",
-          py: 0,
+          py: {
+            xs:0,
+            sm:0,
+            md:1
+          },
           flexDirection: {
             xs: "column",
             sm: "row",
@@ -317,41 +321,56 @@ const ProductList = ({ size = 99999 }) => {
           alignItems: "center",
           backgroundColor: "background.black",
           color: "white",
-          px: 2, // Add padding around the box
+          px: {
+            xs: 0,
+            sm: 0,
+            md: 1
+          }, // Add padding around the box
           my: 4,
         }}
       >
         {/* Left Side: Page Title */}
         <Typography
           variant="body2"
-          sx={{ fontSize: 10, mt: { xs: 1, sm: 1, md: 0 } }}
+          sx={{
+            fontSize: 10,
+            mt: { xs: 1, sm: 1, md: 0 },
+            display: { xs: "none", sm: "none", md: "inline", }
+          }}
         >
-          {`${filteredProducts.length} Item`}
+          {`${filteredProducts.length} Items`}
         </Typography>
 
         {/* Right Side: Option Inputs */}
         <Box
           sx={{
             display: "flex",
-            gap: 2,
+            flexGrow: { xs: 1, sm: 1, md: 0 },
             flexDirection: "row",
-            flexWrap: "wrap",
-            justifyContent: "space-between",
+            width: { xs: "100%", sm: "100%", md: "fit-content" },
+            gap: {
+              xs: 0,
+              sm: 0,
+              md: 2
+            },
             py: {
-              xs: 2,
-              sm: 2,
-              md: 0,
+              xs: 0,
+              sm: 0,
+              md: 1
+            },
+            justifyContent: {
+              xs: "end",
+              sm: "end",
+              md: "space-between"
             },
           }}
         >
+          {/*Tags */}
           {tagFilterOption.length > 0 && (
             <FormControl
-              sx={{ m: 1, display: "flex", flexDirection: "row" }}
+              sx={{ width: { xs: "33.3%", sm: "33.3%", md: "fit-content" } }}
               variant="standard"
             >
-              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
-                Tag
-              </Typography>
               <Select
                 value={tags}
                 onChange={(event) => {
@@ -373,14 +392,12 @@ const ProductList = ({ size = 99999 }) => {
             </FormControl>
           )}
 
+          {/*Collection */}
           {collectionFilterOption.length > 0 && (
             <FormControl
-              sx={{ m: 1, display: "flex", flexDirection: "row" }}
+              sx={{ width: { xs: "33.3%", sm: "33.3%", md: "fit-content" } }}
               variant="standard"
             >
-              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
-                Collection
-              </Typography>
               <Select
                 value={collection}
                 onChange={(event) => {
@@ -402,13 +419,11 @@ const ProductList = ({ size = 99999 }) => {
             </FormControl>
           )}
 
+          {/*Sort */}
           <FormControl
-            sx={{ m: 1, display: "flex", flexDirection: "row" }}
+            sx={{ width: { xs: "33.3%", sm: "33.3%", md: "fit-content" } }}
             variant="standard"
           >
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
-              Sort
-            </Typography>
             <Select
               value={sort}
               onChange={(event) => {