fix(configurator): eliminate mobile preview flash + fix narrow-viewport overflow

[jackgranatowski]

Summary

• No more preview flash on mobile — previewOpen and outputOpen are now initialised directly from window.matchMedia at store creation time, so the correct closed/open state is set before the first render. Previously previewOpen: true caused the full-screen slide-over overlay to appear on first paint on mobile, before the $effect could close it — on slow devices this got stuck and blocked all interaction.
• Viewport buttons no longer overflow — split each button label into emoji + <span class="preview__vp-text">. At ≤430 px the text is hidden, leaving five compact emoji-only buttons that fit comfortably in the 94 vw slide-over without any horizontal overflow or overflow:hidden clipping.
• Larger close tap target — the ✕ button grows to min-width: 44px; min-height: 44px at ≤1100 px (WCAG 2.5.5 minimum touch target), making it reliably tappable on phones.

Test plan

• On a ≤600 px phone: reload — output drawer starts collapsed, preview overlay is not visible on first paint
• On a >1100 px desktop: reload — preview pane is open as expected, no layout shift
• On mobile, tap the preview toggle in the header — slide-over opens; tap the ✕ (44 × 44 px) — slide-over closes reliably
• On a ≤430 px phone width, open the preview slide-over — viewport buttons show emoji only, no overflow
• Resize desktop window across the 1100 px breakpoint — preview opens/closes correctly
• All 352 unit tests pass (npm test in configurator/)

https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu

---

Generated by Claude Code

Summary by CodeRabbit

• Style
  • Improved responsive layout for preview and output panels based on device viewport size
  • Enhanced mobile accessibility with larger touch targets (44×44px) for preview controls on narrow screens
  • Viewport control labels now hide on extra-small screens (≤430px) to optimize space while maintaining functionality
  • Refined viewport preset definitions with emoji and text label separation for better visual clarity

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 99ab7ba1-bd17-493c-8950-775edab63aa7

📥 Commits

Reviewing files that changed from the base of the PR and between 5de46c4 and 121577f.

📒 Files selected for processing (3)

• configurator/src/App.svelte
• configurator/src/components/Preview.svelte
• configurator/src/lib/store.svelte.js

---

📝 Walkthrough

Walkthrough

This PR refactors viewport-driven UI state initialization by moving logic from component effects into store initialization, and improves Preview component responsive design. The store now computes previewOpen and outputOpen from matchMedia breakpoints at startup; App.svelte effects listen only for subsequent changes; viewport presets are restructured with separated emoji/label, and responsive styling is enhanced for touch targets and narrow screens.

Changes

Viewport breakpoint initialization and responsive UI refinements

Layer / File(s)	Summary
Store-driven viewport initialization configurator/src/lib/store.svelte.js	Store initialization now computes previewOpen and outputOpen from window.matchMedia breakpoints (1100px and 600px respectively) with SSR safety, replacing hard-coded true defaults.
App.svelte effect simplification configurator/src/App.svelte	Preview and output drawer effects no longer force-initialize state from matchMedia; they now only respond to subsequent viewport changes, relying on store-initialized values.
Preview viewport preset and responsive styling configurator/src/components/Preview.svelte	Viewport presets separate emoji from label; buttons render emoji and label in distinct elements; CSS enforces 44×44px minimum touch targets on narrow screens and hides viewport text below 430px width.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED#316: Implements mobile (≤600px) output drawer collapse behavior via ui.outputOpen breakpoint-driven initialization in App.svelte with corresponding store changes.
• codeslash-dev/SLASHED#312: Updates viewport breakpoint handling by wiring window.matchMedia listeners to drive ui.previewOpen in App.svelte and store initialization.

🚥 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 accurately describes the two main fixes: eliminating the mobile preview flash (via store-based initialization) and fixing narrow-viewport overflow (via emoji-only buttons and adjusted breakpoints).
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/loving-galileo-0197q7

---

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