fix(configurator): mobile overlay, scale overflow, color-scheme picker - #319
Merged
Conversation
… mobile Typography samples (font-size: clamp(...)) were expanding each scale row to the full rendered font size — display-l rows could be 50px+ tall, making the scale preview dominate the screen. Spacing bars also had no max-inline-size cap. - Cap .preview__sample to max-block-size: 3rem so large text steps don't blow up the grid row height on any viewport - Add max-inline-size: 100% to .preview__bar to prevent bar overflow - At ≤600px: collapse to 2-column grid (token + clamp value), hide the visual sample column entirely — the layout was too cramped to be useful https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
…w pane
pv__space-bar uses inline-size: var(--sf-space-{s}) with no overflow
guard — large spacing tokens caused horizontal scroll (or bar bleedout)
inside the live preview overlay.
- overflow: hidden on pv__space-row clips the row
- flex-shrink: 0 on the code label keeps it readable
- max-inline-size: 100% + flex-shrink: 1 on the bar itself so it
compresses rather than overflows when the pane is narrow (mobile)
https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
1. ScaleGenerator overlay (the real "transparent container" bug) App.svelte used :global(.preview) which matched ALL elements with class preview — including ScaleGenerator's internal <div class="preview">. On mobile (≤1100px) that div was getting position:fixed, z-index:50 and the 48px drop-shadow, covering the entire screen on Spacing/Typography tabs. Fix: narrow the selector to section.preview (the Preview component root) so ScaleGenerator's div is unaffected. 2. --sf-color-scheme gets color picker instead of text input isColorToken() checked token.namespace === 'color' before the hasTopLevelSpace() guard, so --sf-color-scheme (value: "light dark") was classified as a colour despite being a CSS keyword list. Fix: move the value/space check before the namespace check so keyword lists like "light dark" fall through to the text control. https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR refines component layout and spacing constraints across the configurator preview system and improves color token detection logic. CSS updates target preview responsiveness and flex behavior, while model.js clarifies the internal logic for distinguishing color tokens from composite values. ChangesLayout and color token refinements
Possibly related PRs
🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
$(cat <<'EOF'
Summary
Three bugs found and fixed — two root-cause discoveries after Playwright investigation:
1. ScaleGenerator
<div class="preview">rendered as fixed overlay on mobile (root cause of "transparent container" bug)App.svelteused:global(.preview)to applyposition: fixed; z-index: 50; box-shadow: -16px 0 48px rgba(0,0,0,0.5)to the live preview slide-over on narrow viewports. This selector matched every element with classpreviewin the document — includingScaleGenerator's internal<div class="preview">(its scale visualization section).On mobile, navigating to the Spacing or Typography tab (which renders a ScaleGenerator with
basicGenerators) caused thatdivto be positioned as a 338×800 px fixed overlay covering the entire screen.Fix: narrowed the selector to
section.preview— thePreviewcomponent's root is a<section>, ScaleGenerator's internal div is a<div>, so the fix is surgical.2.
--sf-color-schemegot a color picker instead of a text inputisColorToken()inmodel.jscheckedtoken.namespace === 'color'before thehasTopLevelSpace(v)guard.--sf-color-schemehasnamespace: "color"butvalue: "light dark"(a CSS keyword list, not a color). It was classified as a colour and rendered with the OKLCH picker.Moved the
hasTopLevelSpacecheck before the namespace check — tokens whose default value contains a top-level space (composite values, keyword lists) are never a single colour. Confirmed: only--sf-color-schemechanges behaviour across all 800+ tokens.3. ScaleGenerator preview rows overflowing on mobile
Typography samples used
font-size: clamp(...)at full token size —display-lrows were 50 px+ tall, making the scale preview dominate the screen. Spacing bars had nomax-inline-sizecap.max-block-size: 3remon.preview__samplecaps row height on all viewportsmax-inline-size: 100%on.preview__barprevents bar overflowAlso fixed the same overflow in
Preview.svelte's spacing scale section (pv__space-bar): addedoverflow: hiddenon the row,flex-shrink: 0on the label,max-inline-size: 100% + flex-shrink: 1on the bar.Test plan
--sf-color-schemetoken: shows text input, not color pickerhttps://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
EOF
)
Generated by Claude Code
Summary by CodeRabbit