From a650807c967d72b084f24a56331eb3f9f968931f Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Tue, 13 Dec 2022 13:17:48 -0500
Subject: [PATCH] fix: correctly center navbar els (#5676)

---
 src/components/NavBar/index.tsx    | 6 +++---
 src/components/NavBar/style.css.ts | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 560b6d758c..515d724e68 100644
--- a/src/components/NavBar/index.tsx
+++ b/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}>
diff --git a/src/components/NavBar/style.css.ts b/src/components/NavBar/style.css.ts
index 0a942c1f62..572f7e06bb 100644
--- a/src/components/NavBar/style.css.ts
+++ b/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',
   }),
 ])