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