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
>
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 = ({