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	Nov 21, 2024 4:49pm

[canerakdas]

Suggested change

	lg:bottom-[4rem]
	lg:bottom-16

In the default Tailwind spacing scale, 16 is equivalent to 4rem

[canerakdas]

Suggested change

	h-[4rem]
	h-16

Similarly, you can use h-16

[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