Page MenuHomePhabricator

[Cashtab] No scrolling of no content below fold
ClosedPublic

Authored by bytesofman on Apr 13 2024, 04:36.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC2cec9cac5d82: [Cashtab] No scrolling of no content below fold
Summary

Some screens fit all content above the fold. When this happens, we do not want the user to be able to scroll down and see a lot of empty space. Want to emulate a mobile app experience.

Test Plan

npm test

This diff is live at https://cashtab-local-dev.netlify.app/

Diff Detail

Repository
rABC Bitcoin ABC
Branch
css-improvements
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 28553
Build 56647: Build Diffcashtab-tests
Build 56646: arc lint + arc unit

Event Timeline

bytesofman added inline comments.
cashtab/src/components/App/styles.js
44 ↗(On Diff #47143)

We only apply min-height: 100vh to one component, which wraps all the other components.

This is what prevents loading the app with, say, 30px of whitespace at the bottom of the screen, if the screen is smaller than the viewport height.

46 ↗(On Diff #47143)

a bit annoying to review here since I also organized the components within the page in this diff.

main change is I added AppPositionCss to this component.

52 ↗(On Diff #47143)

we standardize the position and background rules for all components in the central "column" of the cashtab.

83 ↗(On Diff #47143)

another "main change" here -- before, we just slapped min-height: 100vh on everything.

the footer, though has a constant height of 80px, and is fixed to the bottom of the screen. We want CustomApp to be 100vh, but the rest of the wallet stuff should end before the footer (otherwise we always have 80px of empty space that is behind the footer and can be scrolled).

emack added a subscriber: emack.

It still scrolls, albeit by a negligible 1px or so, across both mobile and web. Not a blocking issue.

This revision is now accepted and ready to land.Apr 14 2024, 13:58