fix: search bar width sizing (#5277)

* Updating Search Bar to be more responsive

src/components/NavBar/SearchBar.css.ts

@@ -4,6 +4,9 @@ import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css'
 import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 const DESKTOP_NAVBAR_WIDTH = 360
+const DESKTOP_NAVBAR_WIDTH_L = 440
+const DESKTOP_NAVBAR_WIDTH_XL = 540
+const DESKTOP_NAVBAR_WIDTH_XXL = 640
 const MAGNIFYING_GLASS_ICON_WIDTH = 28
 
 const baseSearchStyle = style([
@@ -23,6 +26,26 @@ const baseSearchStyle = style([
   },
 ])
 
+const baseSearchNftStyle = style([
+  baseSearchStyle,
+  {
+    '@media': {
+      [`screen and (min-width: 1024px) and (max-width: 1080px)`]: {
+        width: `${330}px`,
+      },
+      [`screen and (min-width: 1190px) and (max-width: 1380px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH_L}px`,
+      },
+      [`screen and (min-width: 1380px) and (max-width: 1479px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH_XL}px`,
+      },
+      [`screen and (min-width: ${1480}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH_XXL}px`,
+      },
+    },
+  },
+])
+
 export const searchBarContainer = style([
   sprinkles({
     right: '0',
@@ -40,6 +63,35 @@ export const searchBarContainer = style([
   },
 ])
 
+export const searchBarContainerNft = style([
+  sprinkles({
+    right: '0',
+    top: '0',
+    zIndex: '3',
+    display: 'inline-block',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.lg}px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH / 2}px`,
+        top: '-6px',
+      },
+      [`screen and (min-width: 1024px) and (max-width: 1080px)`]: {
+        right: `-${300 / 2}px`,
+      },
+      [`screen and (min-width: 1190px) and (max-width: 1380px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH_L / 2}px`,
+      },
+      [`screen and (min-width: 1380px) and (max-width: 1479px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH_XL / 2}px`,
+      },
+      [`screen and (min-width: ${1480}px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH_XXL / 2}px`,
+      },
+    },
+  },
+])
+
 export const searchBar = style([
   baseSearchStyle,
   sprinkles({
@@ -49,6 +101,15 @@ export const searchBar = style([
   }),
 ])
 
+export const nftSearchBar = style([
+  baseSearchNftStyle,
+  sprinkles({
+    color: 'textTertiary',
+    paddingX: '16',
+    background: 'backgroundSurface',
+  }),
+])
+
 export const searchBarInput = style([
   sprinkles({
     padding: '0',
@@ -75,6 +136,19 @@ export const searchBarDropdown = style([
   },
 ])
 
+export const searchBarDropdownNft = style([
+  baseSearchNftStyle,
+  sprinkles({
+    borderBottomLeftRadius: '12',
+    borderBottomRightRadius: '12',
+    background: 'backgroundSurface',
+    height: { sm: 'viewHeight', md: 'auto' },
+  }),
+  {
+    borderTop: 'none',
+  },
+])
+
 export const suggestionRow = style([
   sprinkles({
     display: 'flex',

src/components/NavBar/SearchBar.tsx

@@ -33,6 +33,7 @@ export const SearchBar = () => {
   const phase1Flag = useNftFlag()
   const isMobile = useIsMobile()
   const isTablet = useIsTablet()
+  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   useOnClickOutside(searchRef, () => {
     isOpen && toggleOpen()
@@ -45,7 +46,7 @@ export const SearchBar = () => {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
-      enabled: !!debouncedSearchValue.length && phase1Flag === NftVariant.Enabled,
+      enabled: !!debouncedSearchValue.length && isPhase1,
     }
   )
 
@@ -112,19 +113,19 @@ export const SearchBar = () => {
           position={{ sm: 'fixed', md: 'absolute' }}
           width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
           ref={searchRef}
-          className={styles.searchBarContainer}
+          className={isPhase1 ? styles.searchBarContainerNft : styles.searchBarContainer}
           display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
         >
           <Row
             className={clsx(
-              ` ${styles.searchBar} ${!isOpen && !isMobile && magicalGradientOnHover} ${
-                isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
-              }`
+              ` ${isPhase1 ? styles.nftSearchBar : styles.searchBar} ${
+                !isOpen && !isMobile && magicalGradientOnHover
+              } ${isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)}`
             )}
             borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
             borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
             borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-            borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
+            borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : isPhase1 ? '2px' : '1px'}
             onClick={() => !isOpen && toggleOpen()}
             gap="12"
           >

src/components/NavBar/SearchBarDropdown.tsx

@@ -118,6 +118,7 @@ export const SearchBarDropdown = ({
   const isTokenPage = pathname.includes('/tokens')
   const phase1Flag = useNftFlag()
   const [resultsState, setResultsState] = useState<ReactNode>()
+  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   const { data: trendingCollectionResults, isLoading: trendingCollectionsAreLoading } = useQuery(
     ['trendingCollections', 'eth', 'twenty_four_hours'],
@@ -342,7 +343,7 @@ export const SearchBarDropdown = ({
   ])
 
   return (
-    <Box className={styles.searchBarDropdown}>
+    <Box className={isPhase1 ? styles.searchBarDropdownNft : styles.searchBarDropdown}>
       <Box opacity={isLoading ? '0.3' : '1'} transition="125">
         {resultsState}
       </Box>