fix: mobile network switcher (#4516)

* fix: mobile network switcher

* fix zindex
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.tsx

@@ -65,7 +65,8 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
   const isMobile = useIsMobile()
 
   const ref = useRef<HTMLDivElement>(null)
-  useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
+  const modalRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(ref, isOpen ? toggleOpen : undefined, [modalRef])
 
   const info = chainId ? getChainInfo(chainId) : undefined
 
@@ -79,7 +80,7 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
   const isSupported = !!info
 
   const dropdown = (
-    <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'}>
+    <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
       <Column marginX="8">
         {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
           <ChainRow

src/components/NavBar/NavDropdown.css.ts

@@ -10,10 +10,10 @@ const baseNavDropdown = style([
     borderWidth: '1px',
     paddingBottom: '8',
     paddingTop: '8',
+    zIndex: '2',
   }),
   {
     boxShadow: '0px 4px 12px 0px #00000026',
-    zIndex: 10,
   },
 ])
 
@@ -36,5 +36,6 @@ export const mobileNavDropdown = style([
     bottom: '56',
     left: '0',
     right: '0',
+    width: 'full',
   }),
 ])