feat: show searchbar on tablet size (#4484)

show searchbar on tablet size
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/Navbar.css.ts

@@ -34,7 +34,6 @@ export const logo = style([
 
 export const baseContainer = style([
   sprinkles({
-    display: 'flex',
     alignItems: 'center',
   }),
 ])
@@ -51,6 +50,7 @@ export const baseMobileContainer = style([
 export const baseSideContainer = style([
   baseContainer,
   sprinkles({
+    display: 'flex',
     width: 'full',
     flex: '1',
     flexShrink: '2',

src/components/NavBar/Navbar.tsx

@@ -45,9 +45,14 @@ const MobileNavbar = () => {
             </Box>
             <ChainSwitcher leftAlign={true} />
           </Box>
+          <Box className={styles.middleContainer} display={{ sm: 'none', md: 'flex' }}>
+            <SearchBar />
+          </Box>
           <Box className={styles.rightSideMobileContainer}>
             <Row gap="16">
-              <SearchBar />
+              <Box display={{ sm: 'flex', md: 'none' }}>
+                <SearchBar />
+              </Box>
               <MobileSideBar />
             </Row>
           </Box>
@@ -100,7 +105,7 @@ const Navbar = () => {
             </MenuItem>
           </Row>
         </Box>
-        <Box className={styles.middleContainer}>
+        <Box className={styles.middleContainer} display="flex">
           <SearchBar />
         </Box>
         <Box className={styles.rightSideContainer}>

src/components/NavBar/SearchBar.tsx

@@ -335,7 +335,7 @@ export const SearchBar = () => {
           borderRadius={isOpen ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
           borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          display={{ sm: isOpen ? 'flex' : 'none', xxl: 'flex' }}
+          display={{ sm: isOpen ? 'flex' : 'none', md: 'flex' }}
           justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
           onFocus={() => !isOpen && toggleOpen()}
           onClick={() => !isOpen && toggleOpen()}
@@ -359,7 +359,7 @@ export const SearchBar = () => {
             value={searchValue}
           />
         </Row>
-        <Box display={{ sm: isOpen ? 'none' : 'flex', xxl: 'none' }}>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', md: 'none' }}>
           <NavIcon onClick={toggleOpen}>
             <NavMagnifyingGlassIcon width={28} height={28} />
           </NavIcon>