[DX-1525]: Collapse long snippets behind a "Show more" toggle

[m-hulbert]

Description

This PR collapses codeblocks by default if they are above 15 lines long, adding a 'show more' and 'show less' toggle so that it's easy to switch between them.

The intention is to improve the readability of pages with multiple, long codeblocks such as getting started guides.

Checklist

• Commits have been rebased.
• Linting has been run against the changed file(s).
• The PR adheres to the writing style guide and contribution guide.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 737921ec-9d51-455e-aa5e-7aadb5fbb869

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/codeblock-show-more

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[umair-ably]

1 nit... we can only calculate the height of the code blocks after the page has rendered, which in theory means all pages will load with the code blocks fully expanded, and then instantly redraw them to be collapsed if needed (which could cause a subtle flash or layout shift).

However, I've tested this across several pages in the preview app and it looks perfect - nothing funky spotted