Story 2551: Improve Library Subpage Layout

[julhoang]

Issue: #2551

⚠️ This PR is branched off from Story 2430: Library Subpage Integration ⚠️

Summary & Context

This PR improves the grid layout of the Library subpage by capping the height of each card body and making the scroll region the card body rather than the text area inside it. Also settles card strokes on one neutral colour across themes and dark mode.

• Figma link:
  1. Library Subpage
  2. Benchmark cards
  3. Event Cards
  4. Post Cards
• Link to components/page:
  1. Any library subpage that you choose to test – please see the Peer Reviews section below (e.g. http://localhost:8000/library/1.90.0/beast/ )
  2. http://localhost:8000/v3/demo/components/#benchmarks-card-themes-default-teal-yellow-green (newly added)
  3. http://localhost:8000/v3/demo/components/#event-cards-card-variants-with-different-themes (only border color changed)
  4. http://localhost:8000/v3/demo/components/#post-cards-card-variant-with-different-themes-default-teal-yellow-green (only border color changed)

Changes

Card body height and scroll region

• Add a body wrapper with overflow-y: auto to each card so everything below the title scrolls as one region, leaving the title, divider and CTA fixed
• Cap each body: About 450px, Contributors 440px, Benchmarks 362px, Designed for 245px, Install 214px, Freeform 143px
• Keep the About and Install code blocks at full height so they don't become nested scrollers
• Fix the mailing list card so it fills its column – its root sits under an extra [data-ml-block] Alpine wrapper the max-width override list didn't reach

Benchmark Cards

• Add more colored variants to the V3 Demo page

Card strokes

• Every themed card now uses the neutral --color-stroke-weak (code-block.css, card-group.css, stats.css); removes the redundant html.dark rules and the unused --code-block-border tokens
• Dark mode: transparent example box and TOC backgrounds in v3-examples-section.css; mailing list badge text switched to --color-text-on-accent

Tokens and docs

• Top-of-file docs added to four CSS files
• --letter-spacing-tight replaces hardcoded values in stats.css;

‼️ Risks & Considerations ‼️

• The four card components are shared, so this reaches the Documentation card, the Release notes card in release-detail.css, markdown cards with a CTA on user profiles, and the components demo page
• The mailing list override depends on [data-ml-block] staying on the Alpine wrapper

Peer Testing Review

1. Please follow the set up as in Story 2430: Library Subpage Integration
2. Once loaded the website-adoc demo content into a library, you can visit Admin Panel to update the content to test how the UI respond when there are more or less content (and how the card will handle overflow)

Screenshots

Before	After	Notes
		Full page comparison, main difference is with the new max-height restrictions
		Text color token used in the badge was updated so that the dark mode is correctly applied. This component is also now full-width on mobile view.
		For all of the cards that have accent colors, the border is now --stroke-weak (instead of yellow, green, etc) to correctly match Figma

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b0769467-c7ae-4a9d-9ddf-1f60c3ad83c9

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 julia/improve-library-subpage-layout

---

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