From 8661bd81c6b06919a40f53ea474f3e600bc16fba Mon Sep 17 00:00:00 2001
From: Fionna Chan <13184582+fionnachan@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:21:33 +0800
Subject: [PATCH] fix: show settings panel on mobile (#2018)

---
 .../src/components/common/SettingsDialog.tsx          |  1 +
 .../src/components/common/SidePanel.tsx               | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/SettingsDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/SettingsDialog.tsx
index fb65190cf8..68789b0c97 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SettingsDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SettingsDialog.tsx
@@ -47,6 +47,7 @@ export const SettingsDialog = () => {
       isOpen={settingsOpen}
       heading="Settings"
       onClose={closeSettings}
+      dialogWrapperClassName="z-[1001]"
       panelClassNameOverrides="lg:!w-[644px] !min-w-[350px]" // custom width
     >
       <div className="flex w-full flex-col items-center gap-6 text-white">
diff --git a/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx b/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx
index 557e0f560a..a0651aa339 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx
@@ -11,6 +11,7 @@ type SidePanelProps = {
   children: React.ReactNode
   panelClassNameOverrides?: string
   scrollable?: boolean
+  dialogWrapperClassName?: string
 }
 
 export const SidePanel = ({
@@ -19,7 +20,8 @@ export const SidePanel = ({
   onClose,
   children,
   panelClassNameOverrides = '',
-  scrollable = true
+  scrollable = true,
+  dialogWrapperClassName
 }: SidePanelProps) => {
   const [open, setOpen] = useState(false)
   const [isClosing, setIsClosing] = useState(false)
@@ -41,7 +43,7 @@ export const SidePanel = ({
     // prevent flickering caused by race conditions
     setTimeout(() => {
       setIsClosing(false)
-    }, 0)
+    }, 10)
   }, [onClose, setIsClosing])
 
   return (
@@ -49,7 +51,10 @@ export const SidePanel = ({
       <Dialog
         open={open}
         onClose={handleCloseStart}
-        className="fixed z-40 h-screen max-h-screen"
+        className={twMerge(
+          'fixed z-40 h-screen max-h-screen',
+          dialogWrapperClassName
+        )}
       >
         <Transition.Child
           as={Fragment}