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.
Details
Details
- Reviewers
emack - Group Reviewers
Restricted Project - Commits
- rABC2cec9cac5d82: [Cashtab] No scrolling of no content below fold
npm test
This diff is live at https://cashtab-local-dev.netlify.app/
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Branch
- css-improvements
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 28554 Build 56649: Build Diff cashtab-tests Build 56648: arc lint + arc unit
Event Timeline
| cashtab/src/components/App/styles.js | ||
|---|---|---|
| 44 | 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 | 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 | we standardize the position and background rules for all components in the central "column" of the cashtab. | |
| 83 | 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). | |
Comment Actions
It still scrolls, albeit by a negligible 1px or so, across both mobile and web. Not a blocking issue.