theoludwig commented 5 months ago

Description

On small screen (e.g: width 412px), on some security blog post page (e.g: https://nodejs.org/en/blog/vulnerability/april-2024-security-releases), there is a horizontal scrollbar appearing because of the texts overflow in Table of Contents, and added padding in footer (we don't need this padding on small screens, as the "Trademark Policy", "Privacy Policy", etc. is centered).

We can clearly see the horizontal (overflow-x) scrollbar on this screen:

Validation

This PR fixes this issue by wrapping the texts:

Check List

[x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
[x] I have run npm run format to ensure the code follows the style guide.
[x] I have run npm run test to check if all tests are passing.
[x] I have run npx turbo build to check if the website builds without errors.

vercel[bot] commented 5 months ago

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 1, 2024 3:43pm

github-actions[bot] commented 5 months ago

Lighthouse Results URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 95	🟢 100	🟢 96	🟢 91	🔗
/en/about	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 98	🟢 98	🟢 100	🟢 92	🔗
/en/download	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 95	🟢 100	🟢 96	🟢 92	🔗

github-actions[bot] commented 5 months ago

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.04% (588/653)	76.08% (175/230)	92.18% (118/128)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 :zzz:	0 :x:	0 :fire:	5.728s :stopwatch:

canerakdas commented 5 months ago

The lint check gives an error; it's probably related to the order of the Tailwind classes. Can you re-run the format script 🙇