fix(ui): inline headings inside collapsible summaries

[Adebesin-Cell]

Summary

• Markdown readmes commonly put headings inside <summary> (e.g. <summary><h5>...</h5></summary>). Because headings are block-level, the disclosure marker and the heading text wrapped onto two lines.
• Inline headings and paragraphs that are direct children of <summary> so the marker sits next to the label. Heading font-size/weight are preserved (still comes from existing [data-level] rules), matching GitHub/JSR rendering.

Closes#2596

Reference of expected behavior: https://jsr.io/@nikelborm/fetch-github-folder

BEFORE

AFTER

Test plan

• /package/fetch-github-folder → collapsed and expanded disclosures render on one line
• Heading styling (size/weight) is still visually distinct from body text
• Other readmes with plain-text summaries are unaffected

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 20, 2026 1:42pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 20, 2026 1:42pm
npmx-lunaria	Ignored		Apr 20, 2026 1:42pm

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated CSS styling in app/components/Readme.vue for details > summary elements to display immediate child headings (h1–h6) and paragraphs as inline elements with removed margins, allowing them to render on the same line as the disclosure marker.

Changes

Cohort / File(s)	Summary
Readme component styling app/components/Readme.vue	Added CSS rules to make immediate child headings and paragraphs within details > summary display as inline elements with zero margins, preventing line breaks between the disclosure marker and content.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The pull request directly addresses issue #2596 by adding CSS rules to make headings and paragraphs inside summary elements render inline, matching the expected behaviour from GitHub and JSR.
Out of Scope Changes check	✅ Passed	All changes in app/components/Readme.vue are directly scoped to fixing the collapsible summary heading rendering issue; no unrelated modifications are present.
Title check	✅ Passed	The title clearly and concisely describes the main change: making headings inside collapsible summary elements display inline with the disclosure marker instead of on separate lines.
Description check	✅ Passed	The pull request description clearly relates to the changeset. It explains the problem (headings in summary elements wrapping to two lines), the solution (making them inline), and provides before/after screenshots with test verification.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[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!