From ba404cbf4987c9f5dd23c048f2f4bc32ee443a25 Mon Sep 17 00:00:00 2001
From: utkarsha-deriv <utkarsha@regentmarkets.com>
Date: Thu, 3 Aug 2023 09:26:29 +0400
Subject: [PATCH] fix: close dropdown when item is clicked, fix the gap issue
 for mobile devices

---
 .../ApiTokenNavbarItem/api_token_switcher.module.scss      | 7 ++++++-
 src/components/ApiTokenNavbarItem/index.tsx                | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss b/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss
index bc72e1ba..5a9615ad 100644
--- a/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss
+++ b/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));
+    }
   }
 }
diff --git a/src/components/ApiTokenNavbarItem/index.tsx b/src/components/ApiTokenNavbarItem/index.tsx
index cfff0b01..77795dc7 100644
--- a/src/components/ApiTokenNavbarItem/index.tsx
+++ b/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 />