Skip to content
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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

amyy2
Copy link

@amyy2 amyy2 commented Nov 21, 2024

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

Image 1 Image 2

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

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run npm run format to ensure the code follows the style guide.
  • I have run npm run test to check if all tests are passing.
  • I have run npx turbo build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

@amyy2 amyy2 requested a review from a team as a code owner November 21, 2024 15:43
Copy link

vercel bot commented Nov 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview Nov 21, 2024 4:49pm

.DS_Store Outdated Show resolved Hide resolved
apps/.DS_Store Outdated Show resolved Hide resolved
sm:p-12;
sm:p-12
lg:sticky
lg:bottom-[4rem]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
h-[4rem]
h-16

Similarly, you can use h-16

Copy link
Contributor

@TenzDelek TenzDelek left a 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix : whitespaces between the main content and progressive sidebar (scroll issue)
5 participants