fix: removing scrollbar on swap with banner (#7434)

src/components/NavBar/UkBanner.tsx

@@ -5,9 +5,9 @@ import styled from 'styled-components'
 import { ButtonText, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
-export const UK_BANNER_HEIGHT = 64
-export const UK_BANNER_HEIGHT_MD = 112
-export const UK_BANNER_HEIGHT_SM = 136
+export const UK_BANNER_HEIGHT = 65
+export const UK_BANNER_HEIGHT_MD = 113
+export const UK_BANNER_HEIGHT_SM = 137
 
 const BannerWrapper = styled.div`
   position: relative;

src/pages/App.tsx

@@ -32,14 +32,22 @@ import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions'
 
 const AppChrome = lazy(() => import('./AppChrome'))
 
-const BodyWrapper = styled.div`
+const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 100vh;
+  min-height: calc(100vh - ${({ bannerIsVisible }) => (bannerIsVisible ? UK_BANNER_HEIGHT : 0)}px);
   padding: ${({ theme }) => theme.navHeight}px 0px 5rem 0px;
   align-items: center;
   flex: 1;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    min-height: calc(100vh - ${({ bannerIsVisible }) => (bannerIsVisible ? UK_BANNER_HEIGHT_MD : 0)}px);
+  }
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    min-height: calc(100vh - ${({ bannerIsVisible }) => (bannerIsVisible ? UK_BANNER_HEIGHT_SM : 0)}px);
+  }
 `
 
 const MobileBottomBar = styled.div`
@@ -217,7 +225,7 @@ export default function App() {
           <HeaderWrapper transparent={isHeaderTransparent} bannerIsVisible={renderUkBannner} scrollY={scrollY}>
             <NavBar blur={isHeaderTransparent} />
           </HeaderWrapper>
-          <BodyWrapper>
+          <BodyWrapper bannerIsVisible={renderUkBannner}>
             <Suspense>
               <AppChrome />
             </Suspense>