-
Notifications
You must be signed in to change notification settings - Fork 6.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: whitespace between the main content and progressive sidebar #7271
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
sm:p-12; | ||
sm:p-12 | ||
lg:sticky | ||
lg:bottom-[4rem] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lg:bottom-[4rem] | |
lg:bottom-16 |
In the default Tailwind spacing scale, 16
is equivalent to 4rem
@@ -61,6 +65,7 @@ | |||
sticky | |||
bottom-0 | |||
flex | |||
h-[4rem] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
h-[4rem] | |
h-16 |
Similarly, you can use h-16
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hey thanks for the pr, but what i meant in my issue #7251 was not this . while it tackles the main content issue, the sidebar is still having that whitespace behavior which can cause accessibility issue later on. check this sidebar behavior for example. we dont want to scroll all the way up to to navigate to a different content.
Description
Removed whitespace when main content is shorter than sidebar by setting the main content's position to sticky and fixing it to the bottom.
Validation
Left: Before (whitespace under text caused by sidebar height). Right: After (main content sticks to the bottom to eliminate whitespace).
Related Issues
Fixes #7251
Check List
npm run format
to ensure the code follows the style guide.npm run test
to check if all tests are passing.npx turbo build
to check if the website builds without errors.