From 6e21d9d35f018048213ae5ca9f553ce126140501 Mon Sep 17 00:00:00 2001
From: Fionna <13184582+fionnachan@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:44:52 +0100
Subject: [PATCH 1/2] fix: show settings panel on mobile

---
 .../src/components/common/SettingsDialog.tsx             | 1 +
 .../src/components/common/SidePanel.tsx                  | 9 +++++++--
 2 files changed, 8 insertions(+), 2 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..38446dcd01 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)
@@ -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}

From 26534658ee0106317bc9480be1893bccfe10af22 Mon Sep 17 00:00:00 2001
From: Fionna <13184582+fionnachan@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:05:46 +0100
Subject: [PATCH 2/2] update timeout to prevent flickering

---
 .../arb-token-bridge-ui/src/components/common/SidePanel.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 38446dcd01..a0651aa339 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SidePanel.tsx
@@ -43,7 +43,7 @@ export const SidePanel = ({
     // prevent flickering caused by race conditions
     setTimeout(() => {
       setIsClosing(false)
-    }, 0)
+    }, 10)
   }, [onClose, setIsClosing])
 
   return (