fix: show settings panel on mobile (#2018)

OffchainLabs · Oct 24, 2024 · 8661bd8 · 8661bd8
1 parent 10fefa3
commit 8661bd8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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,15 +43,18 @@ export const SidePanel = ({
     // prevent flickering caused by race conditions
     setTimeout(() => {
       setIsClosing(false)
-    }, 0)
+    }, 10)
   }, [onClose, setIsClosing])
 
   return (
     <Transition show={open && !isClosing} as={Fragment}>
       <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}