fix(configurator): collapse output drawer on mobile

[jackgranatowski]

Summary

• On phone-sized viewports (≤600 px) the Override CSS drawer starts collapsed so the main token-editing area has room to be usable. The "Override CSS" bar is still visible and tappable to expand.
• When expanded on narrow screens, max-height is capped at 35 vh (vs 50 vh on desktop) so the drawer never swallows more than a third of the viewport height.

Root cause

OutputPanel defaults to outputOpen: true and max-height: 50 vh. On a typical Android phone (~780 px viewport), that leaves only ~200–250 px for the main area after the header — too small to use the token editors. The Override CSS section was visually "bleeding through" and making the panel inaccessible.

Test plan

• Open configurator on a phone (or DevTools at ≤600 px width) with some overrides set — drawer should start collapsed
• Tap "Override CSS" bar — drawer expands to ≤35 vh, main area stays usable above it
• On desktop (>600 px) — drawer still opens to 50 vh as before, no regression

https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu

---

Generated by Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Enhanced mobile responsiveness by automatically collapsing the output drawer and optimizing layout dimensions for narrow viewports (600px and below).

[coderabbitai]

Warning

Review limit reached

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

More reviews will be available in 56 minutes and 42 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

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.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: aff37bed-0800-40fe-a1a6-7e0abfa82652

📥 Commits

Reviewing files that changed from the base of the PR and between 5de9a87 and 685a0df.

📒 Files selected for processing (1)

• configurator/src/App.svelte

📝 Walkthrough

Walkthrough

The PR adds mobile-responsive behavior to the output drawer component. A reactive effect closes the drawer on narrow viewports, and corresponding CSS styling constrains the drawer's expanded height, ensuring the interface remains usable on phone-sized screens.

Changes

Mobile-responsive output drawer

Layer / File(s)	Summary
Narrow viewport drawer collapse and height constraint configurator/src/App.svelte, configurator/src/components/OutputPanel.svelte	A reactive effect in App.svelte closes the output drawer when viewport width is 600px or less. OutputPanel.svelte adds a media query that limits the expanded drawer's max-height to 35vh on the same narrow viewport, ensuring the interface remains usable on mobile devices.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 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 'fix(configurator): collapse output drawer on mobile' directly and clearly summarizes the main change—making the output drawer collapse on mobile viewports.
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 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.}

[jackgranatowski]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

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

Inline comments:
In `@configurator/src/App.svelte`:
- Around line 147-149: The effect using window.matchMedia only runs once and
doesn't respond to viewport changes; update the $effect to create a
MediaQueryList via window.matchMedia('(max-width: 600px)'), register a change
handler that sets ui.outputOpen = false when matches and ui.outputOpen = true
when not matches (or toggles appropriately), and ensure you remove the listener
in the effect cleanup (use mediaQuery.removeEventListener or removeListener) so
the handler is deregistered; reference the existing $effect, window.matchMedia,
and ui.outputOpen when making the change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f64b3ec3-2803-4e39-a230-017f6512a920

📥 Commits

Reviewing files that changed from the base of the PR and between 8900ea7 and 5de9a87.

📒 Files selected for processing (2)

• configurator/src/App.svelte
• configurator/src/components/OutputPanel.svelte