fix: re-sync mobile domain panel overflow fix from framework

[jackgranatowski]

Summary

• Re-syncs App.svelte from the framework fix in fix(configurator): stop mobile domain panel overflowing past the icon rail SLASHED#464.
• Root cause: the domain panel sat in the same flex row as the icon nav rail, using w-full (100% of the whole row, not the space remaining after the rail) plus shrink-0 (refusing to shrink). The row then demanded more width than the viewport had, silently clipping content on the right with no scrollbar (app root uses overflow-hidden).
• Fix: flex-1 min-w-0 on mobile so the panel fills only the space actually left after the rail; md:flex-none keeps the desktop fixed-360px behavior unchanged.
• This is the same root cause behind the original "white space top/left, clipped on right" report on the WP admin Tokens page mobile view — independent of the embedded-sizing fix already merged in fix: sync configurator from SLASHED PR 460/461, close release-sync gap #122, since that fix addressed the app's own viewport-vs-container sizing, not this internal flex-row overflow.
• Rebuilt the admin SPA bundle (assets/admin-app/app.js/app.css).

Type

• fix

Checklist

• Conventional Commit messages (feat:, fix:, docs:, …)
• npm test (not run — requires WP test harness not available in this environment; npm run lint and npm run verify were run instead)
• npm run lint passes (stylelint + php -l)
• npm run verify passes (version metadata in sync)
• Generated artifacts not hand-edited (assets/admin-app/app.js/app.css regenerated via npm run build:admin-app)
• CHANGELOG.md updated under ## [Unreleased] — not done, let me know if you'd like this added
• Built SPA assets committed (admin-app/src source changed via sync)

Notes

Depends on codeslash-dev/SLASHED#464 (framework half of this fix), synced via SLASHED_CONFIGURATOR_SRC=/path/to/SLASHED/configurator/src npm run sync.

🤖 Generated with Claude Code

https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Moved the mobile controls/preview toggle to a more prominent bar below the header for easier access.
  • Improved the preview experience so preview-dependent panels refresh more reliably.
• Bug Fixes
  • Adjusted the mobile layout of the controls panel to better fit folded preview mode and prevent cramped content.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 59 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: 35b239d1-9a1a-4ee3-8c7d-e4902a431696

📥 Commits

Reviewing files that changed from the base of the PR and between 6dd67cb and 929d244.

📒 Files selected for processing (3)

• SLASHED-for-WP/admin-app/.vendored-manifest.json
• SLASHED-for-WP/admin-app/src/App.svelte
• SLASHED-for-WP/assets/admin-app/app.js

📝 Walkthrough

Walkthrough

This PR updates the vendored manifest to reference local configurator files instead of GitHub main branch, relocates the mobile fold toggle bar in App.svelte to appear under the header instead of at the bottom, adjusts left panel layout classes, and adds document registration for live preview resolution in AppOverlay.svelte.

Changes

Admin App UI and Vendoring Updates

Layer / File(s)	Summary
Mobile fold toggle relocation admin-app/src/App.svelte	The mobile fold toggle bar (switching between controls and preview, with overrides count badge) is moved from the bottom of the page to a new bar under the header; the old bottom toggle block is removed; the left domain panel container's layout classes are updated to use flex-1 min-w-0 and md:flex-none md:w-[360px].
Preview document registration admin-app/src/AppOverlay.svelte	A new registerPreviewDoc import is added, and the live-preview effect now calls both injectLivePreview(overrides) and registerPreviewDoc(document).
Vendored manifest source update admin-app/.vendored-manifest.json	The manifest's _info.source and syncedAt, along with each vendored file's source field, are changed from GitHub @main references to local paths.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED-Plugins#34: Both PRs modify admin-app/src/App.svelte's main shell/layout and preview-related UI behavior.
• codeslash-dev/SLASHED-Plugins#86: Both PRs touch admin-app/src/AppOverlay.svelte, related to preview overlay configurator functionality.

Suggested labels: codex

🚥 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 clearly describes the main change: re-syncing a mobile domain panel overflow fix from the framework.
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.

✨ 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 admin-app domain panel flex overflow (sync from framework)

🐞 Bug fix 🕐 20-40 Minutes

AI Description

• Fix mobile flex-row overflow by making the domain panel grow/shrink within remaining width.
• Preserve desktop behavior by keeping the domain panel fixed-width at md+ breakpoints.
• Re-sync vendored configurator metadata and rebuild admin SPA artifacts.

Diagram

graph TD
  A["WP Admin page"] --> B["admin-app bundle"] --> C["App.svelte layout"] --> D["Flex row"] --> E["SidebarNav rail"] --> F["Domain panel"]
  F --> G["Preview panel"]
  subgraph Legend
    direction LR
    _ui["UI component"] ~~~ _asset["Built asset"]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Allow horizontal scrolling for overflow

• ➕ Avoids layout rework; users can reach clipped content even if overflow happens
• ➖ Poor UX in a tool UI; hides the root cause; conflicts with an overflow-hidden app root

2. Wrap rail + panel into a responsive column on mobile

• ➕ Eliminates shared-row sizing conflicts; simpler mental model for mobile
• ➖ Larger UX change; may require additional styling/behavior adjustments and regression testing

3. Use CSS grid with fixed rail + minmax() panel

• ➕ Explicitly models remaining width (e.g., rail fixed, panel minmax(0,1fr)); less prone to flex min-width pitfalls
• ➖ More refactor than necessary; riskier for a small sync fix; may diverge from upstream framework implementation

Recommendation: The PR’s approach (flex-1 + min-w-0 on mobile, md:flex-none for desktop) is the best fit: it directly fixes the flex sizing pitfall causing overflow with minimal surface area and matches the upstream framework fix being synced.

Files changed (4) +57 / -55

Bug fix (1) +4 / -2

App.svelteFix mobile domain panel overflow by switching to flex-1 + min-w-0 +4/-2

Fix mobile domain panel overflow by switching to flex-1 + min-w-0

• Changes the left domain panel from w-full + shrink-0 to flex-1 min-w-0 on mobile so it only occupies the remaining width next to the icon rail. Keeps desktop behavior by using md:flex-none and md:w-[360px].

SLASHED-for-WP/admin-app/src/App.svelte

Other (3) +53 / -53

.vendored-manifest.jsonRecord sync source/timestamp and local vendored file origins +51/-51

Record sync source/timestamp and local vendored file origins

• Updates vendoring metadata to reflect a local sync run (source and per-file source URIs) and refreshes the syncedAt timestamp. No functional runtime behavior change; used for traceability of vendored configurator files.

SLASHED-for-WP/admin-app/.vendored-manifest.json

app.cssRegenerate built admin-app CSS bundle +1/-1

Regenerate built admin-app CSS bundle

• Updates the compiled CSS output from the admin-app build to reflect the synced source/layout changes. This file is a generated artifact.

SLASHED-for-WP/assets/admin-app/app.css

app.jsRegenerate built admin-app JS bundle +1/-1

Regenerate built admin-app JS bundle

• Updates the compiled JS output from the admin-app build to reflect the synced source/layout changes. This file is a generated artifact.

SLASHED-for-WP/assets/admin-app/app.js

[qodo-code-review]

Code Review by Qodo

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

Context used

✅ Compliance rules (platform): 1 rule

1. Vendored App.svelte modified 📘 Rule violation § Compliance

Description

SLASHED-for-WP/admin-app/src/App.svelte is listed as a vendored file in
SLASHED-for-WP/admin-app/.vendored-manifest.json, but it is modified in this PR. This violates the
requirement that files listed in the vendored manifest must not be edited in this repository’s
change set.

Code

SLASHED-for-WP/admin-app/src/App.svelte[274]

+    <div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>

Relevance

⭐ Low

PRs regularly modify manifest-listed App.svelte during framework syncs (e.g., #122, #123); vendored
edits appear permitted.

PR-#111
PR-#122
PR-#123

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The vendored manifest explicitly lists src/App.svelte as a vendored file, and this PR changes the
corresponding file SLASHED-for-WP/admin-app/src/App.svelte (notably the updated container classes
on line 274). Per the rule, any modification to a manifest-listed file is a violation.

Rule 1514148: Do not modify vendored files listed in .vendored-manifest.json
SLASHED-for-WP/admin-app/.vendored-manifest.json[9-17]
SLASHED-for-WP/admin-app/src/App.svelte[271-274]

Agent prompt

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

## Issue description
`SLASHED-for-WP/admin-app/src/App.svelte` is a vendored file (listed in `SLASHED-for-WP/admin-app/.vendored-manifest.json`) but is modified in this PR, which is disallowed.

## Issue Context
The compliance rule requires that any file listed in the vendored manifest must not be changed as part of this repo’s PR diff.

## Fix Focus Areas
- SLASHED-for-WP/admin-app/src/App.svelte[271-274]
- SLASHED-for-WP/admin-app/.vendored-manifest.json[9-17]

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

---

[coderabbitai]

🧹 Nitpick comments (1)

SLASHED-for-WP/admin-app/src/App.svelte (1)

263-285: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Minor duplication in toggle buttons.

The two toggle buttons share nearly identical structure/classes. Could extract a small reusable button snippet, but given the small, self-contained scope this is optional.

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

In `@SLASHED-for-WP/admin-app/src/App.svelte` around lines 263 - 285, The mobile
toggle buttons in App.svelte are nearly identical, so reduce duplication by
extracting the shared button structure/styling into a small reusable snippet or
helper and parameterizing the label, icon, active state, and click handler. Keep
the existing mobileView logic and overridesCount badge behavior intact while
consolidating the repeated button markup used for the controls and preview
toggles.

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

Nitpick comments:
In `@SLASHED-for-WP/admin-app/src/App.svelte`:
- Around line 263-285: The mobile toggle buttons in App.svelte are nearly
identical, so reduce duplication by extracting the shared button
structure/styling into a small reusable snippet or helper and parameterizing the
label, icon, active state, and click handler. Keep the existing mobileView logic
and overridesCount badge behavior intact while consolidating the repeated button
markup used for the controls and preview toggles.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 16319fc0-2d24-4a6e-b536-ab032071eddc

📥 Commits

Reviewing files that changed from the base of the PR and between bfe046c and 6dd67cb.

📒 Files selected for processing (5)

• SLASHED-for-WP/admin-app/.vendored-manifest.json
• SLASHED-for-WP/admin-app/src/App.svelte
• SLASHED-for-WP/admin-app/src/AppOverlay.svelte
• SLASHED-for-WP/assets/admin-app/app.css
• SLASHED-for-WP/assets/admin-app/app.js