fix(configurator): size-scale preview flattened button label font (card backdrop)

[jackgranatowski]

Symptom

In the configurator's Components preview, the Size scale row rendered every rung's label at the same font size — the boxes grew (padding + min-height) but the XS/S/M/L/XL labels looked identical, most obviously at narrow (mobile) widths. Reported from the live site.

Root cause

The preview wrapped each button row in well(), which is a .sf-card. The framework intentionally shrinks buttons nested in a card:

.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size, var(--sf-text-s)); }

That rule overrides only the font-size --size tier (not padding/min-height), pinning every nested button's label to --sf-text-s. So inside the well, all five rungs collapsed to one label size while their padding/min-height still scaled — hiding the per-rung font ladder that section exists to show. At narrow viewports the fluid --sf-text-* steps sit near text-s anyway, making them visually identical.

Measured (412px viewport), before: 12.9px flat across xs–xl.

Fix

Give the button rows a non-card framed surface (frame(), a plain bordered div) instead of well(), so each rung renders its true --sf-text-{rung} label. The card sections (media card + modifiers) intentionally keep .sf-card.

Measured after: labels scale xs 10.3 → s 12.9 → m 16.2 → l 20.3 → xl 25.5px — a clear staircase, confirmed visually in light + dark.

This is a preview-only change — the framework itself was always correct (a plain .sf-btn--xl outside a card is --sf-text-xl); only the preview's card backdrop was masking it.

Verification

• Rendered + measured the size-scale rung fonts at mobile (412px) and desktop widths.
• tsc clean, svelte-check 0 errors, preview-coverage + configurator unit (164) and component (25) suites pass.

Notes

• Single-file change (configurator/src/lib/preview/sections.ts); framework/tokens untouched.
• borders() well() usage left intact (only the Components button rows switched to frame()).
• Branch restarted from current main since feat(configurator): rebuild the Components live-preview tab from scratch #593 merged — fresh PR.

🤖 Generated with Claude Code

---

Generated by Claude Code

Summary by CodeRabbit

• Style
  • Updated button previews with a cleaner surfaced and bordered frame.
  • Improved the presentation of button families, styles, full-width examples, and states.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 52 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9ac8b601-cf85-41f8-9dcc-60d6d91f2792

📥 Commits

Reviewing files that changed from the base of the PR and between e7b7a9d and f61b96a.

📒 Files selected for processing (5)

• configurator/src/lib/preview/sections.ts
• configurator/src/lib/preview/specimen.ts
• demos/full-api-demo-with-overrides.html
• demos/full-api-demo.html
• demos/ultimate-override.css

📝 Walkthrough

Walkthrough

The components preview adds a bordered surface frame helper and replaces well(...) wrappers in the Families, Styles, Full width, and States button demos.

Changes

Button preview layout

Layer / File(s)	Summary
Framed button demos configurator/src/lib/preview/sections.ts	Adds a frame(content) helper and applies it to the Families, Styles, Full width, and States button examples without changing their internal button markup.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED#593: Updates the same button preview area with size, style, and full-width button examples.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the main fix: changing the configurator preview backdrop to restore the intended button label font scaling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/button-size-visibility-issue-40xlwy

---

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

[greptile-apps]

Greptile Summary

This preview-only fix replaces the .sf-card (well()) wrapper on button-demo rows inside the configurator's Components preview with a plain bordered div (frame()), so the per-rung font-size ladder in the Size-scale section renders correctly at all viewports.

• Root cause addressed: .sf-card .sf-btn has a framework rule that pins --sf-btn-font-size--size to --sf-text-s, collapsing all five size rungs to the same label size inside the old well() backdrop; the new frame() avoids the .sf-card class entirely.
• Scope: five well() → frame() substitutions within components() in sections.ts; framework CSS and all other preview sections are untouched.

Confidence Score: 5/5

Safe to merge — preview-only change with no framework or token modifications.

The change is contained to a single file and affects only the HTML emitted by the configurator's preview gallery. Every CSS token in the new frame() function is a live framework token verified in the source. The well import remains valid and the cards section correctly keeps .sf-card.

No files require special attention.

Important Files Changed

Filename	Overview
configurator/src/lib/preview/sections.ts	Replaces five well() (sf-card backdrop) calls with a locally-defined frame() (plain bordered div) for button rows in components(); all tokens used are valid; well import is still needed by other sections.

_{Reviews (1): Last reviewed commit: "chore(demos): rebuild full-api demos for..." | Re-trigger Greptile}

[coderabbitai]

🧹 Nitpick comments (1)

configurator/src/lib/preview/sections.ts (1)

340-341: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider extracting frame to specimen.ts alongside well.

well is exported from specimen.ts as a shared helper. frame solves the same category of problem (bordered surface wrapper) and is currently local to components(). If another preview section needs a non-card framed surface in the future, the helper would need to be duplicated. Extracting it now would keep the wrapper helpers colocated and consistent.

This is deferable — the local definition is fine for the current scope.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@configurator/src/lib/preview/sections.ts` around lines 340 - 341, Extract the
local frame helper from components() into specimen.ts alongside the exported
well helper, export it for reuse, and update components() to import and call the
shared frame implementation while preserving its current markup and styling.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@configurator/src/lib/preview/sections.ts`:
- Around line 340-341: Extract the local frame helper from components() into
specimen.ts alongside the exported well helper, export it for reuse, and update
components() to import and call the shared frame implementation while preserving
its current markup and styling.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 93c2f613-dfeb-439e-aa5a-18ebbac0903e

📥 Commits

Reviewing files that changed from the base of the PR and between fc10789 and e7b7a9d.

📒 Files selected for processing (1)

• configurator/src/lib/preview/sections.ts