fix(configurator): keep preview toolbar to a single row on mobile

[jackgranatowski]

Summary

• User reported that on mobile, the Preview panel's toolbar (template tabs, width/theme controls, motion select, refresh/external-link) was eating "half the screen" — it used flex-wrap below the md: breakpoint, so on narrow viewports it wrapped onto 2-3 lines.
• Separately verified (via direct browser test at 1200px width, screenshot attached in investigation) that "both Controls and Preview panels visible simultaneously on desktop" already works correctly today — hidden md:flex reliably reasserts visibility at md: and above regardless of the mobile fold-toggle state, no bug there.
• Fix: the toolbar is now a fixed-height (h-10) single row that scrolls horizontally (overflow-x-auto) instead of wrapping vertically. Had to add shrink-0 to every control group (template tabs, width controls, theme controls, motion select, refresh, external-link) — without it, switching to flex-nowrap caused the first group (template tabs) to be squeezed to near-invisibility since it was the only child without an explicit no-shrink, while everything else held its size.

Test plan

• npx svelte-check — 0 errors.
• npm run build — builds cleanly.
• Verified in a 400×700 mobile viewport: toolbar height is a constant 40px regardless of content (previously grew when wrapped), template tabs render at full size (not squeezed), and scrolling the toolbar horizontally reaches the motion dropdown / refresh / external-link controls.
• Verified desktop (1200px) layout unaffected.

🤖 Generated with Claude Code

https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm

---

Generated by Claude Code

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 3 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: 8b9e530f-dc44-450a-b23c-e1ad46280bda

📥 Commits

Reviewing files that changed from the base of the PR and between ac7b411 and 5542e3c.

📒 Files selected for processing (1)

• configurator/src/components/shell/PreviewPanel.svelte

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/configurator-sync-pr-460-461-g1f2w4

---

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

[qodo-code-review]

PR Summary by Qodo

Fix preview toolbar to stay single-row on mobile

🐞 Bug fix 🕐 10-20 Minutes

AI Description

• Prevent the Preview toolbar from wrapping into multiple lines on narrow viewports.
• Make the toolbar a fixed-height single row with horizontal scrolling.
• Ensure each control group doesn’t shrink when space is constrained.

Diagram

graph TD
  A(["Mobile viewport"]) --> B["PreviewPanel.svelte"] --> C["Preview toolbar"] --> D["Control groups"]
  C --> E["Fixed height (h-10)"]
  C --> F["Horizontal scroll"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Mobile overflow menu (“More” dropdown)

• ➕ Keeps the toolbar visually uncluttered on very small screens
• ➕ Avoids horizontal scrolling for discoverability/accessibility
• ➖ More implementation complexity (menu state, focus management, keyboard nav)
• ➖ Potentially slower access to frequently used controls

2. Responsive reduction (hide/de-emphasize low-priority controls on mobile)

• ➕ Simplifies the toolbar and avoids scrolling
• ➕ Can improve perceived usability on small screens
• ➖ Removes functionality unless paired with an alternate access path
• ➖ Requires product decisions on priority ordering

Recommendation: The chosen approach (fixed-height, non-wrapping toolbar with horizontal scroll and explicit no-shrink groups) is the best low-risk fix: it preserves all controls, prevents vertical space blowups on mobile, and avoids introducing new interaction patterns. Consider an overflow menu later if horizontal scrolling proves problematic in usability testing.

Files changed (1) +9 / -8

Bug fix (1) +9 / -8

PreviewPanel.svelteForce preview toolbar into a single, scrollable row on mobile +9/-8

Force preview toolbar into a single, scrollable row on mobile

• Replaces mobile flex wrapping with a fixed-height, flex-nowrap toolbar that scrolls horizontally. Adds 'shrink-0' to each toolbar control group to prevent key controls (notably template tabs) from being squeezed when space is constrained.

configurator/src/components/shell/PreviewPanel.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 6 rules

1. Toolbar height can clip ✓ Resolved 🐞 Bug ☼ Reliability

Description

The Preview toolbar is now hard-coded to h-10 while containing a native <select> and multiple
controls, so if any control renders taller (e.g., due to browser zoom / OS text size /
platform-native select sizing) it can overflow vertically and be partially hidden or overlap
content. This is environment-dependent but can make preview controls difficult to use when it
occurs.

Code

configurator/src/components/shell/PreviewPanel.svelte[R561-563]

+  <!-- Preview toolbar — always a single row (scrolls horizontally instead of
+       wrapping) so it can't eat a growing chunk of a short mobile viewport. -->
+  <div class="h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">

Relevance

⭐⭐ Medium

Team fixes clipping/responsiveness (PRs #463, #308), but no prior stance on avoiding fixed-height
toolbars like h-10.

PR-#463
PR-#308
PR-#312

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The toolbar container is explicitly fixed to h-10 and includes a native <select> plus multiple
buttons; if any of these render taller than the fixed 40px height, they will overflow vertically
because only horizontal overflow is enabled on the container.

configurator/src/components/shell/PreviewPanel.svelte[560-658]
configurator/src/components/shell/PreviewPanel.svelte[626-635]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The preview toolbar container is fixed to `h-10` but contains a native `<select>` and other controls; on some platforms/with text scaling this can make controls taller than 40px, causing vertical overflow (clipping/overlap).

### Issue Context
The toolbar is intended to stay a single row; preventing wrap doesn’t require a hard fixed height.

### Fix Focus Areas
- configurator/src/components/shell/PreviewPanel.svelte[560-636]

Possible fixes:
- Prefer `min-h-10` (and optionally `py-0`) instead of `h-10` so the row can grow if controls render taller, while keeping `flex-nowrap overflow-x-auto` to prevent multi-row wrapping.
- If you must keep a fixed height, explicitly constrain children to fit (e.g., consistent `h-*`/`leading-none`) and set `overflow-y-hidden` to prevent vertical bleed.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---