chore: Clean up homepage code examples (tweak comments + no wrapping)

[MattIPv4]

Description

Ensures that tabs + code don't allow for whitespace wrapping outside of what is in the source, preferring to overflow with scrolling within their container. I should note that I tried my best to resolve some responsiveness issues that this introduces (hence setting some max/min widths to stop grid/flex overflowing -- that being said, it looks like there are general responsiveness issues on these pages beyond this change (especially around tablet breakpoints).

Also, cleans up the comments in the examples to better follow what I think the user flow would be for trying them out, as I'd noted in #6457 (review)

Validation

On mobile + desktop, the code examples on the homepage behave as one would expect them to. On mobile, you can scroll the tabs + code to see more, rather than it wrapping.

Related Issues

Fixes #6388

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo 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	Mar 11, 2024 1:27am

[github-actions]

Lighthouse Results

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

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	80.07% (450/562)	79.55% (144/181)	71.17% (79/111)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
90	0 💤	0 ❌	0 🔥	4.79s ⏱️

[MattIPv4]

When I check the preview on my phone, the CodeBox component seems to increase the width of the page layout;

Heh, I thought I'd fixed that. Will continue playing around with getting flex + grid to behave. I suspect I need to throw some more max-w-full onto things.

Open to suggestions on a cleaner way to make that happen.

[canerakdas]

LGTM 🚀

[ovflowd]

Just to confirm, scrolling is only on mobile, right? The intended behaviour on desktop is wrapping

[MattIPv4]

Just to confirm, scrolling is only on mobile, right? The intended behaviour on desktop is wrapping

Not currently, I have this set to scroll everywhere. Why would it want to wrap on desktop, that seems like a rather inconsistent behaviour that looks odd?

[mwenku]

Here to learn something new... :)

[ovflowd]

LGTM! Let's see how it looks like and the feedback we get