fix: correctly center navbar els (#5676)

src/components/NavBar/index.tsx

@@ -101,7 +101,7 @@ const Navbar = () => {
   return (
     <>
       <Nav>
-        <Box display="flex" height="full" flexWrap="nowrap" alignItems="center">
+        <Box display="flex" height="full" flexWrap="nowrap">
           <Box className={styles.leftSideContainer}>
             <Box className={styles.logoContainer}>
               <UniIcon
@@ -114,7 +114,7 @@ const Navbar = () => {
               />
             </Box>
             {!isNftPage && (
-              <Box display={{ sm: 'flex', lg: 'none' }} alignSelf="center">
+              <Box display={{ sm: 'flex', lg: 'none' }}>
                 <ChainSelector leftAlign={true} />
               </Box>
             )}
@@ -122,7 +122,7 @@ const Navbar = () => {
               <PageTabs />
             </Row>
           </Box>
-          <Box className={styles.middleContainer} alignItems="flex-start">
+          <Box className={styles.searchContainer}>
             <SearchBar />
           </Box>
           <Box className={styles.rightSideContainer}>

src/components/NavBar/style.css.ts

@@ -7,7 +7,6 @@ export const logoContainer = style([
   sprinkles({
     display: 'flex',
     marginRight: { sm: '12', xxl: '20' },
-    alignItems: 'center',
     cursor: 'pointer',
   }),
 ])
@@ -31,16 +30,19 @@ export const baseSideContainer = style([
 export const leftSideContainer = style([
   baseSideContainer,
   sprinkles({
+    alignItems: 'center',
     justifyContent: 'flex-start',
   }),
 ])
 
-export const middleContainer = style([
+export const searchContainer = style([
   sprinkles({
     flex: '1',
     flexShrink: '1',
     justifyContent: { lg: 'flex-end', xl: 'center' },
     display: { sm: 'none', xl: 'flex' },
+    alignSelf: 'center',
+    height: '48',
     alignItems: 'flex-start',
   }),
 ])
@@ -48,6 +50,7 @@ export const middleContainer = style([
 export const rightSideContainer = style([
   baseSideContainer,
   sprinkles({
+    alignItems: 'center',
     justifyContent: 'flex-end',
   }),
 ])