fix: jumpy nav on safari mweb (#5668)

* test

* swap page nav bar on mobile looks weird without this change

* fixes

src/components/NavBar/index.tsx

@@ -16,23 +16,6 @@ import { MenuDropdown } from './MenuDropdown'
 import { SearchBar } from './SearchBar'
 import * as styles from './style.css'
 
-const MobileBottomBar = styled.div`
-  position: fixed;
-  display: flex;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  justify-content: space-between;
-  padding: 4px 8px;
-  height: ${({ theme }) => theme.mobileBottomBarHeight}px;
-  background: ${({ theme }) => theme.backgroundSurface};
-  border-top: 1px solid ${({ theme }) => theme.backgroundOutline};
-
-  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
-    display: none;
-  }
-`
-
 const Nav = styled.nav`
   padding: 20px 12px;
   width: 100%;
@@ -62,7 +45,7 @@ const MenuItem = ({ href, dataTestId, id, isActive, children }: MenuItemProps) =
   )
 }
 
-const PageTabs = () => {
+export const PageTabs = () => {
   const { pathname } = useLocation()
   const { chainId: connectedChainId } = useWeb3React()
   const chainName = chainIdToBackendName(connectedChainId)
@@ -145,12 +128,6 @@ const Navbar = () => {
           </Box>
         </Box>
       </Nav>
-      <MobileBottomBar>
-        <PageTabs />
-        <Box marginY="4">
-          <MenuDropdown />
-        </Box>
-      </MobileBottomBar>
     </>
   )
 }

src/components/swap/styleds.tsx

@@ -12,6 +12,7 @@ export const PageWrapper = styled.div`
   padding: 68px 8px 0px;
   max-width: 480px;
   width: 100%;
+  height: 100vh;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
     padding-top: 48px;

src/pages/App.tsx

 import { initializeAnalytics, OriginApplication, sendAnalyticsEvent, Trace, user } from '@uniswap/analytics'
 import { CustomUserProperties, EventName, getBrowser, PageName } from '@uniswap/analytics-events'
 import Loader from 'components/Loader'
+import { MenuDropdown } from 'components/NavBar/MenuDropdown'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
+import { Box } from 'nft/components/Box'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
 import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
@@ -21,6 +23,7 @@ import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
 import { useAnalyticsReporter } from '../components/analytics'
 import ErrorBoundary from '../components/ErrorBoundary'
+import { PageTabs } from '../components/NavBar'
 import NavBar from '../components/NavBar'
 import Polling from '../components/Polling'
 import Popups from '../components/Popups'
@@ -83,6 +86,25 @@ const BodyWrapper = styled.div`
   `};
 `
 
+const MobileBottomBar = styled.div`
+  z-index: ${Z_INDEX.sticky};
+  position: sticky;
+  display: flex;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100vw;
+  justify-content: space-between;
+  padding: 4px 8px;
+  height: ${({ theme }) => theme.mobileBottomBarHeight}px;
+  background: ${({ theme }) => theme.backgroundSurface};
+  border-top: 1px solid ${({ theme }) => theme.backgroundOutline};
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    display: none;
+  }
+`
+
 const HeaderWrapper = styled.div<{ transparent?: boolean }>`
   ${flexRowNoWrap};
   background-color: ${({ theme, transparent }) => !transparent && theme.backgroundSurface};
@@ -303,6 +325,12 @@ export default function App() {
             </Suspense>
             <Marginer />
           </BodyWrapper>
+          <MobileBottomBar>
+            <PageTabs />
+            <Box marginY="4">
+              <MenuDropdown />
+            </Box>
+          </MobileBottomBar>
         </Trace>
       </AppWrapper>
     </ErrorBoundary>

src/pages/Pool/index.tsx

@@ -165,7 +165,7 @@ function WrongNetworkCard() {
   const theme = useTheme()
 
   return (
-    <>
+    <div style={{ height: '100vh' }}>
       <PageWrapper>
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
@@ -189,7 +189,7 @@ function WrongNetworkCard() {
         </AutoColumn>
       </PageWrapper>
       <SwitchLocaleLink />
-    </>
+    </div>
   )
 }
 
@@ -263,7 +263,7 @@ export default function Pool() {
 
   return (
     <Trace page={PageName.POOL_PAGE} shouldLogImpression>
-      <>
+      <div style={{ height: '100vh' }}>
         <PageWrapper>
           <AutoColumn gap="lg" justify="center">
             <AutoColumn gap="lg" style={{ width: '100%' }}>
@@ -342,7 +342,7 @@ export default function Pool() {
           </AutoColumn>
         </PageWrapper>
         <SwitchLocaleLink />
-      </>
+      </div>
     </Trace>
   )
 }