Fix: whitespace between the main content and progressive sidebar

[amyy2]

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

• 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.

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Dec 3, 2024 5:32pm

[TenzDelek]

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.

[amyy2]

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.

I understand, so would you prefer if the main content and sidebar each have their own scroll bar? Or should I replicate the same behaviour I added here to the sidebar (one it reaches the bottom of its content it stops scrolling so that there's no whitespace)? Thanks for the feedback by the way!

[TenzDelek]

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.

I understand, so would you prefer if the main content and sidebar each have their own scroll bar? Or should I replicate the same behaviour I added here to the sidebar (one it reaches the bottom of its content it stops scrolling so that there's no whitespace)? Thanks for the feedback by the way!

https://vercel.com/docs/getting-started-with-vercel
you can check out their behavior for reference

[amyy2]

Hey @TenzDelek, I pushed some changes that hopefully reflect what you were looking for more closely. Feel free to give me any feedback and I can improve it further!

[mikeesto]

This looks like an improvement to me, thanks @amyy2

[TenzDelek]

This looks like an improvement to me, thanks @amyy2

+1, thank you for the update @amyy2

[ovflowd]

Thank you for your contribution!

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.79% (631/695)	72.44% (184/254)	94.53% (121/128)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
143	0 💤	0 ❌	0 🔥	4.938s ⏱️