fix: change from flex to inline to fix safari bugs (#4559)

change from flex to inline to fix safari bugs
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/SearchBar.css.ts

@@ -27,6 +27,7 @@ export const searchBarContainer = style([
     right: '0',
     top: '0',
     zIndex: '3',
+    display: 'inline-block',
   }),
   {
     '@media': {

src/components/NavBar/SearchBar.tsx

@@ -332,64 +332,62 @@ export const SearchBar = () => {
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
 
   return (
-    <>
-      <Box position="relative">
-        <Box
-          position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
-          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-          ref={searchRef}
-          className={styles.searchBarContainer}
+    <Box position="relative">
+      <Box
+        position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+        ref={searchRef}
+        className={styles.searchBarContainer}
+      >
+        <Row
+          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
+          borderRadius={isOpen ? undefined : '12'}
+          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+          borderBottomWidth={isOpen ? '0px' : '1px'}
+          display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
+          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
+          onFocus={() => !isOpen && toggleOpen()}
+          onClick={() => !isOpen && toggleOpen()}
+          gap="12"
         >
-          <Row
-            className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
-            borderRadius={isOpen ? undefined : '12'}
-            borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-            borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-            borderBottomWidth={isOpen ? '0px' : '1px'}
-            display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
-            justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-            onFocus={() => !isOpen && toggleOpen()}
-            onClick={() => !isOpen && toggleOpen()}
-            gap="12"
-          >
-            <Box display={{ sm: 'none', md: 'flex' }}>
-              <MagnifyingGlassIcon />
-            </Box>
-            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
-              <ChevronLeftIcon />
-            </Box>
-            <Box
-              as="input"
-              placeholder={placeholderText}
-              width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                !isOpen && toggleOpen()
-                setSearchValue(event.target.value)
-              }}
-              className={styles.searchBarInput}
-              value={searchValue}
-              ref={inputRef}
-            />
-          </Row>
-          <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
-            <NavIcon onClick={toggleOpen}>
-              <NavMagnifyingGlassIcon width={28} height={28} />
-            </NavIcon>
+          <Box display={{ sm: 'none', md: 'flex' }}>
+            <MagnifyingGlassIcon />
+          </Box>
+          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+            <ChevronLeftIcon />
           </Box>
-          {isOpen &&
-            (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
-              <SkeletonRow />
-            ) : (
-              <SearchBarDropdown
-                toggleOpen={toggleOpen}
-                tokens={reducedTokens}
-                collections={reducedCollections}
-                hasInput={debouncedSearchValue.length > 0}
-              />
-            ))}
+          <Box
+            as="input"
+            placeholder={placeholderText}
+            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              !isOpen && toggleOpen()
+              setSearchValue(event.target.value)
+            }}
+            className={styles.searchBarInput}
+            value={searchValue}
+            ref={inputRef}
+          />
+        </Row>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
+          <NavIcon onClick={toggleOpen}>
+            <NavMagnifyingGlassIcon width={28} height={28} />
+          </NavIcon>
         </Box>
+        {isOpen &&
+          (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
+            <SkeletonRow />
+          ) : (
+            <SearchBarDropdown
+              toggleOpen={toggleOpen}
+              tokens={reducedTokens}
+              collections={reducedCollections}
+              hasInput={debouncedSearchValue.length > 0}
+            />
+          ))}
       </Box>
       {isOpen && <Overlay />}
-    </>
+    </Box>
   )
 }