Make OnboardingModal content scroll on vertical overflow #7347
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There is already a PR for this at #7312 and since the issue has been assigned to that contributor we will continue with that PR. Regardless, thanks for showing interest in our repository! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
Closes #7308
Description
The height of the modal container is fixed at 450px while the content could be arbitrarily long. This poses an issue on mobile screens with portrait layout, where the available real estate for text content is limited to roughly 300px width by 250px height (depending on the device's resolution and the size of the header image).
This PR solves the issue by setting
overflow-y: scrollon the text container.However, from a UI standpoint, it's worth reconsidering the best design for mobile devices - having a header image, and then a lengthy header and description all constrained within a modal may not be the best UI.
Note: You will need to clear the onboardingSeen variable in local storage using Chrome DevTools to view the modal.
Preview
Before:
After (tested using French, on the Chrome responsive simulator w iPhone 12 dimensions):
Emissions-CO.-de-la-consommation-electrique-en-temps-reel-App-Electricity-Maps.webm
Double check
poetry run test_parser "zone_key"pnpx prettier@2 --write .andpoetry run formatin the top level directory to format my changes.