fix: dropdown in smaller screens

Author: Waqibsk

src/components/SortDropdown.tsx

@@ -34,7 +34,7 @@ const SortDropdown: React.FC<SortDropdownProps> = ({
      </div>
 
 
-    <div className={`dropdown-content ${showMenu ? "show" : ""}`}>
+    <div className={`dropdown-content ${showMenu ? "show" : "hidden"}`}>
         <div className={`dropdown-item ${"name" === sortField ? "selected" : ""}`} onClick={() => handleSortField("name")}>
           {" "}
 

src/styles/components/SortDropdown.css

@@ -3,7 +3,7 @@
   display: inline-block;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-
+  width: 250px;
   padding: 10px;
 }
 
@@ -98,8 +98,8 @@ border-radius: 5px 0 0 0 ;
 
 
 
-@media (max-width: 768px) {
-  .dropdown:hover .dropdown-content {
+@media (max-width: 1200px) {
+  .hidden {
     display: none;
   }