fix(configurator): stop mobile domain panel overflowing past the icon rail

[jackgranatowski]

Summary

• Follow-up to fix(configurator): stop full-viewport sizing from clipping inside WP admin #463 — the user reported the configurator was still clipped on the right on mobile, this time on the standalone hosted app (not WP admin), so the earlier embedded-sizing fix didn't apply here.
• Root cause: the domain panel (App.svelte) sits in the same flex row as the icon nav rail. On mobile it used w-full (100% of the whole row, not the space remaining after the rail) combined with shrink-0 (refusing to shrink). With the rail's ~56px plus the panel's full-row width, the row demanded more space than the viewport had — silently clipped on the right with no scrollbar, since the app root uses overflow-hidden.
• Fix: flex-1 min-w-0 on mobile so the panel fills whatever space is actually left after the rail and can shrink to fit; md:flex-none preserves the desktop behavior (fixed 360px) unchanged.

Test plan

• Reproduced with Playwright at a 412px mobile viewport: before the fix, the row's scrollWidth (468px) exceeded clientWidth (412px) by exactly the rail's width, with 0 elements overflowing at document level (silently clipped, not scrolled) — matching the reported symptom.
• After the fix: scrollWidth === clientWidth, 0 overflowing elements, and a full-page screenshot confirms all content (including the previously-cut-off "Inverse" swatch and wrapped paragraph text) now fits with proper right-side padding.
• Verified desktop layout unaffected — domain panel still exactly 360px, no overflow, screenshot confirms.
• npx svelte-check — 0 errors. npm run build — builds cleanly. npm run check:version — in sync.

🤖 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: 6 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: 41c1e168-d9f7-458c-870c-ef71a5e14ab7

📥 Commits

Reviewing files that changed from the base of the PR and between 6d5e019 and 1de5f5a.

📒 Files selected for processing (1)

• configurator/src/App.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 mobile domain panel overflow next to icon rail

🐞 Bug fix 🕐 Less than 10 minutes

AI Description

• Prevent the left domain panel from exceeding viewport width on mobile
• Make the panel flex to remaining space beside the icon rail without clipping
• Preserve the existing fixed-width (360px) desktop layout behavior

Diagram

graph TD
  A["App.svelte"] --> B["Main flex row"] --> C["Icon rail"] --> D["Domain panel"] --> E["Panel content"]
  B --> F["Mobile sizing"]
  F --> G["Desktop sizing"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Allow horizontal scrolling instead of resizing

• ➕ Minimal layout change (e.g., overflow-x-auto on the row)
• ➕ Avoids flexbox edge cases
• ➖ Degrades UX (hidden content becomes scroll-dependent)
• ➖ Does not address root cause of incorrect width allocation

2. Compute width via CSS calc() (100vw - railWidth)

• ➕ Explicitly guarantees no overflow if rail width is known
• ➕ Can avoid some flexbox shrink/grow surprises
• ➖ Brittle if rail width changes with breakpoints/themes
• ➖ Harder to maintain than idiomatic flex-1/min-w-0

Recommendation: The chosen approach (flex-1 + min-w-0 on mobile with md:flex-none to preserve desktop) is the most robust and idiomatic flexbox fix: it lets the panel consume only remaining space next to the fixed rail and enables shrink-to-fit, preventing silent clipping under an overflow-hidden root. Alternatives either degrade UX (scrolling) or add brittle width coupling (calc).

Files changed (1) +4 / -2

Bug fix (1) +4 / -2

App.svelteFix domain panel flex sizing to avoid mobile right-edge clipping +4/-2

Fix domain panel flex sizing to avoid mobile right-edge clipping

• Replaces the mobile domain panel sizing from w-full + shrink-0 to flex-1 + min-w-0 so it fills only the remaining width beside the icon rail and can shrink without overflowing. Keeps the desktop behavior via md:flex-none and md:w-[360px]. Also expands the inline comment to document the flexbox root cause.

configurator/src/App.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review