fix: close dropdown when item is clicked, fix the gap issue for mobile devices

Author: utkarsha-deriv

src/components/ApiTokenNavbarItem/api_token_switcher.module.scss

@@ -118,12 +118,17 @@
       overflow-y: scroll;
       max-height: rem(40);
     }
-    @media (max-width: 1200px) {
+    @media (min-width: 768px) and (max-width: 1200px) {
       position: fixed;
       width: 100%;
       top: calc(var(--nav-height) + rem(7));
       left: 0;
       right: 0;
     }
+    @media (max-width: 768px) {
+      position: fixed;
+      width: 100%;
+      top: calc(var(--nav-height) + rem(3.8));
+    }
   }
 }

src/components/ApiTokenNavbarItem/index.tsx

@@ -59,7 +59,12 @@ const ApiTokenNavbarItem = () => {
       )}
 
       {is_toggle_dropdown && (
-        <div className={styles.tokenDropdownWrapper}>
+        <div
+          className={styles.tokenDropdownWrapper}
+          onClick={() => {
+            setToggleDropdown((prev) => !prev);
+          }}
+        >
           {tokens.length > 1 && (
             <div className={styles.tokenDropdown}>
               <TokenDropdown />