update Main.js

src/views/Products/layouts/Desktop/Main.js

@@ -210,33 +210,33 @@ export const Main = ({
         </ul>
       </div>
       <div className="flex flex-col w-full relative">
-        {filterLoading && (
-          <div
-            className="w-full flex justify-center items-center bg-white bg-opacity-70 z-20 backdrop-filter backdrop-blur-xl absolute left-0 top-0"
-            style={{ height: "calc(100vh - 180px)" }}
-          >
-            <Loading size={4} color="bg-green-400" />
-          </div>
-        )}
-        <div>
         {/* arrow */}
-          <div className="w-20 flex flex-row items-center justify-between px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50 divide-x">
-            <div className="">
+        <div className="w-fit self-end flex flex-row items-center justify-between gap-x-2 px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50">
+          <div className="cursor-pointer">
             <img
               src={dropdownIcon}
               alt=""
-                className={`w-4 transform transition-all -rotate-90  cursor-pointer`}
+              className="w-5 transform -rotate-90 cursor-pointer"
             />
           </div>
-            <div className="">
+          <div className="cursor-pointer">
             <img
               src={dropdownIcon}
               alt=""
-                className={`w-4 transform transition-all rotate-90 cursor-pointer`}
+              className="w-5 transform rotate-90 cursor-pointer"
             />
           </div>
         </div>
-
+        {/* carousel slider */}
+        {filterLoading && (
+          <div
+            className="w-full flex justify-center items-center bg-white bg-opacity-70 z-20 backdrop-filter backdrop-blur-xl absolute left-0 top-0"
+            style={{ height: "calc(100vh - 180px)" }}
+          >
+            <Loading size={4} color="bg-green-400" />
+          </div>
+        )}
+        <div>
           {(filterOptions?.productType
             ? filterOptions.productType === "دوره ویدئویی"
             : true) && (
@@ -245,7 +245,6 @@ export const Main = ({
             </ScrollingCarousel>
           )}
         </div>
-
         <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
           {Items(1)}
         </div>