fix: prevent searchbar from overflowing the bottom of the window viewport (WEB-2099) (#6645)

fix: prevent searchbar from overflowing the bottom of the window viewport, add scrolling support for inner contents

src/components/NavBar/SearchBar.css.ts

@@ -50,21 +50,14 @@ const baseSearchNftStyle = style([
   },
 ])
 
-export const searchBarContainer = style([
-  sprinkles({
-    right: '0',
-    top: '0',
-    zIndex: '3',
-    display: 'inline-block',
-  }),
-])
-
 export const searchBarContainerNft = style([
   sprinkles({
     right: '0',
     top: '0',
     zIndex: '3',
-    display: 'inline-block',
+    display: 'flex',
+    maxHeight: 'searchResultsMaxHeight',
+    overflow: 'hidden',
   }),
   {
     backdropFilter: 'blur(60px)',
@@ -118,6 +111,10 @@ export const searchBarDropdownNft = style([
   },
 ])
 
+export const searchBarScrollable = sprinkles({
+  overflowY: 'auto',
+})
+
 export const suggestionRow = style([
   sprinkles({
     display: 'flex',

src/components/NavBar/SearchBar.tsx

@@ -11,7 +11,7 @@ import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { organizeSearchResults } from 'lib/utils/searchBar'
 import { Box } from 'nft/components/Box'
-import { Row } from 'nft/components/Flex'
+import { Column, Row } from 'nft/components/Flex'
 import { magicalGradientOnHover } from 'nft/css/common.css'
 import { useIsMobile, useIsTablet } from 'nft/hooks'
 import { useIsNavSearchInputVisible } from 'nft/hooks/useIsNavSearchInputVisible'
@@ -132,13 +132,13 @@ export const SearchBar = () => {
 
   return (
     <Trace section={InterfaceSectionName.NAVBAR_SEARCH}>
-      <Box
+      <Column
         data-cy="search-bar"
         position={{ sm: 'fixed', md: 'absolute', xl: 'relative' }}
         width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
         className={styles.searchBarContainerNft}
-        display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
+        display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
       >
         <Row
           className={clsx(
@@ -192,7 +192,7 @@ export const SearchBar = () => {
           </TraceEvent>
           {!isOpen && <KeyShortCut>/</KeyShortCut>}
         </Row>
-        <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
+        <Column overflow="hidden" className={clsx(isOpen ? styles.visible : styles.hidden)}>
           {isOpen && (
             <SearchBarDropdown
               toggleOpen={toggleOpen}
@@ -203,8 +203,8 @@ export const SearchBar = () => {
               isLoading={tokensAreLoading || collectionsAreLoading}
             />
           )}
-        </Box>
-      </Box>
+        </Column>
+      </Column>
       {isMobileOrTablet && (
         <NavIcon onClick={toggleOpen} label={placeholderText}>
           <NavMagnifyingGlassIcon />

src/components/NavBar/SearchBarDropdown.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { useTrace } from '@uniswap/analytics'
 import { InterfaceSectionName, NavBarSearchTypes } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
+import clsx from 'clsx'
 import Badge from 'components/Badge'
 import { SupportedChainId } from 'constants/chains'
 import { HistoryDuration, SafetyLevel } from 'graphql/data/__generated__/types-and-hooks'
@@ -355,7 +356,7 @@ export const SearchBarDropdown = ({
   const showBNBComingSoonBadge = chainId === SupportedChainId.BNB && !isLoading
 
   return (
-    <Box className={styles.searchBarDropdownNft}>
+    <Column overflow="hidden" className={clsx(styles.searchBarDropdownNft, styles.searchBarScrollable)}>
       <Box opacity={isLoading ? '0.3' : '1'} transition="125">
         {resultsState}
         {showBNBComingSoonBadge && (
@@ -367,6 +368,6 @@ export const SearchBarDropdown = ({
           </BNBComingSoonBadge>
         )}
       </Box>
-    </Box>
+    </Column>
   )
 }

src/components/NavBar/index.tsx

@@ -23,7 +23,7 @@ import { SearchBar } from './SearchBar'
 import * as styles from './style.css'
 
 const Nav = styled.nav`
-  padding: 20px 12px;
+  padding: ${({ theme }) => `${theme.navVerticalPad}px 12px`};
   width: 100%;
   height: ${({ theme }) => theme.navHeight}px;
   z-index: 2;

src/nft/css/sprinkles.css.ts

@@ -53,6 +53,11 @@ export type Theme = typeof themeContractValues
 
 export const themeVars = createGlobalThemeContract(themeContractValues, (_, path) => `genie-${path.join('-')}`)
 
+export const navDimensions = {
+  height: 72,
+  verticalPad: 20,
+}
+
 const dimensions = {
   '0': '0',
   '2': '2',
@@ -91,6 +96,7 @@ const dimensions = {
   full: '100%',
   min: 'min-content',
   max: 'max-content',
+  searchResultsMaxHeight: `calc(100vh - ${navDimensions.verticalPad * 2}px)`,
   viewHeight: '100vh',
   viewWidth: '100vw',
   auto: 'auto',

src/theme/index.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react'
 import { createGlobalStyle, css, ThemeProvider as StyledComponentsThemeProvider } from 'styled-components/macro'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
+import { navDimensions } from '../nft/css/sprinkles.css'
 import { darkTheme, lightTheme } from './colors'
 import { darkDeprecatedTheme, lightDeprecatedTheme } from './deprecatedColors'
 
@@ -87,7 +88,8 @@ function getSettings(darkMode: boolean) {
     // media queries
     deprecated_mediaWidth: deprecated_mediaWidthTemplates,
 
-    navHeight: 72,
+    navHeight: navDimensions.height,
+    navVerticalPad: navDimensions.verticalPad,
     mobileBottomBarHeight: 52,
     maxWidth: MAX_CONTENT_WIDTH,