Fix article layout responsiveness

[abizek]

Description

Fixes article layout responsiveness (learn page and about page)

I had to modify the tailwind config of the xs screen a little to use the built-in max-width queries(max-sm, max-md, etc). Previously xs: meant max-width of 670px, now it means min-width of 670px, correctly aligning with the built-in min-width queries. All xs: queries have been renamed max-xs: to keep the existing behavior.

xs is a bit misleading still since xs = 670px but sm = 640px and md = 768px.

Validation

2024-06-06.14-12-06.mp4

Related Issues

Fixes #6819

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	Jun 6, 2024 10:24am

[ovflowd]

LGTM! I tested it on all pages and screens, and it looks great! Thanks for your effort here! 🎉

[github-actions]

Lighthouse Results

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

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.67% (593/654)	76.08% (175/230)	94.57% (122/129)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 💤	0 ❌	0 🔥	5.211s ⏱️

[mikeesto]

LGTM. I think these changes may need to be approved in Chromatic

[canerakdas]

LGTM!