Fix Bug Footer #1814
Merged
Fix Bug Footer #1814
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
|
thesocialdev
approved these changes
Feb 12, 2025
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.
Description
I made a mistake by not testing on scrollable pages and only tested on pages without scroll, not realizing that the footer was breaking. Essentially, it broke the layout on scrollable pages because the footer wasn't following the page's flow correctly.
To fix this, I removed the position: absolute from the footer and used alignSelf: "flex-end" to ensure that it always stays at the bottom of the layout. In the parent component, I added display: "grid" and minHeight: "100vh" to ensure that the structure occupies the full height of the screen.
Additionally, I wrapped the other components inside a Box, making sure they are treated as a single unit within the grid. This way, the elements stay grouped correctly without being stretched unexpectedly.
fixes #1809
before:
after:
I am testing on other pages too
Type of change
Testing
Basically, test both scrollable and non-scrollable pages