fix: contained tokenlist height (#531)

* fix: contained tokenlist height * fix: use styled
Uniswap · Mar 3, 2023 · 36b0e71 · 36b0e71 · vercel · Mar 3, 2023
1 parent fa6a5d2
commit 36b0e71
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/src/components/TokenSelect/TokenOptions.tsx b/src/components/TokenSelect/TokenOptions.tsx
@@ -1,10 +1,8 @@
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { useIsDialogPageCentered } from 'components/Dialog'
 import useCurrencyBalance from 'hooks/useCurrencyBalance'
 import useNativeEvent from 'hooks/useNativeEvent'
 import useScrollbar from 'hooks/useScrollbar'
-import { useWindowWidth } from 'hooks/useWindowWidth'
 import {
   ComponentClass,
   CSSProperties,
@@ -140,8 +138,6 @@ const TokenOptions = forwardRef<TokenOptionsHandle, TokenOptionsProps>(function
   { tokens, onSelect }: TokenOptionsProps,
   ref
 ) {
-  const width = useWindowWidth()
-  const isPageCentered = useIsDialogPageCentered()
   const [focused, setFocused] = useState(false)
 
   const [selected, setSelected] = useState<Currency>(tokens[0])
@@ -225,9 +221,8 @@ const TokenOptions = forwardRef<TokenOptionsHandle, TokenOptionsProps>(function
       onFocus={onFocus}
       onMouseMove={onMouseMove}
       style={{
+        minHeight: Math.min(tokens.length, MIN_VISIBLE_TOKENS) * ITEM_SIZE,
         overflow: 'hidden',
-        minWidth: isPageCentered ? Math.min(400, width) : 'auto',
-        minHeight: isPageCentered ? Math.min(tokens.length, MIN_VISIBLE_TOKENS) * ITEM_SIZE : '100%',
       }}
     >
       {/* OnHover is a workaround to Safari's incorrect (overflow: overlay) implementation */}

diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx
@@ -29,8 +29,10 @@ const SearchInputContainer = styled(Row)`
   ${inputCss}
 `
 
-const TokenSelectContainer = styled.div`
+const TokenSelectContainer = styled.div<{ $pageCentered: boolean }>`
   border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+  min-height: ${($pageCentered) => ($pageCentered ? 'unset' : '100%')};
+  min-width: ${({ $pageCentered }) => ($pageCentered ? "min(400px, '100vw')" : 'auto')};
   overflow: hidden;
   padding: 0.5em 0 0;
   @supports (overflow: clip) {
@@ -66,6 +68,8 @@ export function TokenSelectDialogContent({ value, onSelect, onClose }: TokenSele
   const list = useTokenList()
   const tokens = useQueryTokens(query, list)
 
+  const isPageCentered = useIsDialogPageCentered()
+
   const isTokenListLoaded = useIsTokenListLoaded()
   const areBalancesLoaded = useAreBalancesLoaded()
   const [isLoaded, setIsLoaded] = useState(isTokenListLoaded && areBalancesLoaded)
@@ -98,7 +102,7 @@ export function TokenSelectDialogContent({ value, onSelect, onClose }: TokenSele
     )
   }
   return (
-    <TokenSelectContainer>
+    <TokenSelectContainer $pageCentered={isPageCentered ?? false}>
       <Header title={<Trans>Select a token</Trans>} />
       <Column gap={0.75}>
         <Column gap={0.75} style={{ margin: '0 0.5em' }}>