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

This commit is contained in:
Jack Short 2023-10-06 12:33:04 -07:00 committed by GitHub
parent 6e4746a7fe
commit 2c7381ff47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 6 deletions

@ -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;

@ -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>