Design Review - style(App): Fixes having the unnecessary whitespace below the FooterCfGov #369
Conversation
…er while zoomed out or when swiping on mobile
shindigira
changed the title
There was a problem hiding this comment.
Heyo! I think putting the background on a div restricted to the size of this div with h-dvh has some weird effects on pages that are larger than the viewport:
Digging through git, it looks like this h-dvh was set to help with making loading screens take up the viewport, but if you put this on a div that was set to auto, this approach works. 🎉
… wonky colors on certain div's
|
@billhimmelsbach @natalia-fitzgerald Found a flex box-based solution for the overall screen layout which seems to work best. Right now we need to choose between Fix A and Fix B (shown at the top). Also, requires cfpb/design-system-react#333 merged in first to see the change. |
…elow-too-much-white-space-2
|
@shindigira |
| function FooterCfGovWrapper(): JSX.Element { | ||
| // TODO: Choose between: | ||
| // Maximizing the midsection white space with 'mt-auto' or maximizing the gray space in the footer with 'flex-1 | ||
| return <FooterCfGov className='flex-1' />; |
There was a problem hiding this comment.
If you want to see the change before cfpb/design-system-react#333 is merged in, can manually edit this in the browser's devtools.
There was a problem hiding this comment.
@shindigira - How can I see it?
There was a problem hiding this comment.
For you, we should put it on AWS.
There was a problem hiding this comment.
This is up for your review on the preview site @natalia-fitzgerald 👍
…to pass to the inner Footer (#333) closes #332 Allows for custom styling which is needed in cfpb/sbl-frontend#369
…elow-too-much-white-space-2
closes #365
Changes
How to test this PR
yarn installto get the latest DSR updateScreenshots BEFORE the fix
Screenshot - Fix B (View zoomed out) - Maximizing the footer