feat: make playgrounds section collapsible

[bluwy]

🔗 Linked issue

n/a

🧭 Context

Before, the playground (try it out) section isn't collapsible and not properly indented (https://npmx.dev/package/jotai):

I think it should be consistent with the other sections.

📚 Description

Now, it is collapsible and indented (http://localhost:3000/package/jotai):

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 2, 2026 3:18am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 2, 2026 3:18am
npmx-lunaria	Ignored		Mar 2, 2026 3:18am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70a8794 and 9d82407.

📒 Files selected for processing (1)

• app/components/CollapsibleSection.vue

---

📝 Walkthrough

Walkthrough

The PR moves overflow handling out of an element-level class and into the collapsed-state CSS selector in CollapsibleSection.vue (removing the overflow-hidden class and adding overflow: hidden under the collapsed selector while preserving grid-template-rows: 0fr). Playgrounds.vue replaces a static section and heading with a CollapsibleSection instance (id="playgrounds", title bound to i18n) without altering inner dropdown logic or event handling. No public APIs or component signatures were changed.

Possibly related PRs

• fix: collapsing behavior and padding #952: Adjusts CollapsibleSection.vue styling (grid rows and padding) and thus touches the same collapse/layout CSS affected here.
• fix: playground heading matching theme #1662: Modifies Playgrounds.vue heading and section rendering, touching the same UI element replaced by the CollapsibleSection in this PR.

Suggested reviewers

• graphieros
• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the changes: making the playgrounds section collapsible and properly indented to match other sections.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 31033e7 and 70a8794.

📒 Files selected for processing (2)

• app/components/CollapsibleSection.vue
• app/components/Package/Playgrounds.vue

[danielroe]

❤️