fix: re-sync single-row mobile preview toolbar from framework

[jackgranatowski]

Summary

• Re-syncs PreviewPanel.svelte from the framework fix in fix(configurator): keep preview toolbar to a single row on mobile SLASHED#466.
• The preview toolbar (template tabs, width/theme controls, motion select, refresh/external-link) used flex-wrap below the md: breakpoint, so on narrow viewports it wrapped onto 2-3 lines — eating a large chunk of the WP admin Tokens page on mobile before any preview content was visible.
• Now a fixed-height (h-10) single row that scrolls horizontally instead of wrapping, with shrink-0 on every control group so none of them get squeezed to near-invisibility.
• Rebuilt the admin SPA bundle.

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#466 (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

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 2 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: af445b83-a1d7-4262-802d-625e6c1ca161

📥 Commits

Reviewing files that changed from the base of the PR and between 2659c23 and 57f64f1.

📒 Files selected for processing (4)

• SLASHED-for-WP/admin-app/.vendored-manifest.json
• SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte
• SLASHED-for-WP/assets/admin-app/app.css
• SLASHED-for-WP/assets/admin-app/app.js

✨ 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 preview toolbar to single-row horizontal scroll (framework sync)

🐞 Bug fix ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Syncs the PreviewPanel toolbar fix from the SLASHED framework into the WP admin app.
• Prevents toolbar wrapping on narrow viewports by enforcing a fixed-height, scrollable single row.
• Updates vendoring metadata and regenerates committed admin SPA build artifacts.

Diagram

graph TD
  A{{"SLASHED framework"}} --> B(["Sync (npm run sync)"]) --> C["PreviewPanel.svelte"] --> D(["Build admin-app"]) --> E["assets/admin-app (js/css)"] --> F["WP Tokens page"]
  subgraph Legend
    direction LR
    _ext{{"External"}} ~~~ _proc(["Process"]) ~~~ _file["File/Artifact"]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Local CSS override (no framework sync)

• ➕ Smaller PR surface area; avoids touching vendored metadata and rebuild outputs
• ➕ Faster to ship if upstream sync process is blocked
• ➖ Creates divergence from upstream framework behavior and increases future merge/sync conflicts
• ➖ Harder to reason about because the fix lives outside the component source

2. Refactor toolbar into a shared component/utility style

• ➕ Reduces future repetition and makes responsive behavior consistent across panels
• ➕ Could simplify future upstream syncs by isolating layout rules
• ➖ Larger refactor than needed for a layout regression fix
• ➖ Adds review and regression risk beyond the immediate mobile wrapping issue

Recommendation: Keep the upstream re-sync approach: it preserves alignment with the framework fix and minimizes long-term divergence. The local override option is tempting for speed, but it tends to accumulate tech debt in vendored UI surfaces; a broader refactor is not warranted for this targeted regression.

Files changed (4) +62 / -61

Bug fix (1) +9 / -8

PreviewPanel.svelteMake preview toolbar single-row with horizontal scrolling on mobile +9/-8

Make preview toolbar single-row with horizontal scrolling on mobile

• Replaces wrap-based responsive layout with a fixed-height, non-wrapping toolbar that scrolls horizontally. Adds shrink-0 to each control group to prevent controls from compressing to near-invisible widths on narrow screens.

SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte

Other (3) +53 / -53

.vendored-manifest.jsonRecord local configurator sync source and update sync timestamp +51/-51

Record local configurator sync source and update sync timestamp

• Updates vendoring metadata to indicate a local sync source for the framework-configurator files and refreshes the syncedAt timestamp. All vendored file source entries are rewritten from github-based references to local paths.

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

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

Regenerate admin-app CSS bundle

• Updates the committed built CSS artifact to match the resynced PreviewPanel layout change.

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

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

Regenerate admin-app JS bundle

• Updates the committed built JS artifact to include the PreviewPanel toolbar layout adjustments in the compiled output.

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 PreviewPanel.svelte modified 📘 Rule violation § Compliance

Description

The PR changes SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte, which is listed
as a vendored file in SLASHED-for-WP/admin-app/.vendored-manifest.json. Vendored files must not be
modified in this repo; changes should be made in the upstream framework and then re-vendored via the
approved mechanism.

Code

SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[R561-565]

+  <!-- 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">
    <!-- Template tabs -->
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
+    <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">

Relevance

⭐ Low

Repo routinely updates vendored admin-app/src via approved sync/re-sync PRs (e.g., #122, #124);
manifest/docs added in #111.

PR-#111
PR-#122
PR-#124

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

.vendored-manifest.json lists src/components/shell/PreviewPanel.svelte as a vendored file, and
the PR modifies the toolbar markup/classes inside that same file, meaning a vendored file was
changed in this change set.

Rule 1514148: Do not modify vendored files listed in .vendored-manifest.json
SLASHED-for-WP/admin-app/.vendored-manifest.json[122-125]
SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[561-565]

Agent prompt

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

## Issue description
A file tracked as vendored (`src/components/shell/PreviewPanel.svelte`) was modified in this PR, which violates the policy prohibiting changes to vendored files listed in `.vendored-manifest.json`.

## Issue Context
The vendored manifest explicitly lists `src/components/shell/PreviewPanel.svelte` as vendored content. This repository should not carry direct modifications to that file; instead, changes should be applied in the upstream framework source and then brought in through the standard vendoring/sync process approved by the policy.

## Fix Focus Areas
- SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[561-565]
- SLASHED-for-WP/admin-app/.vendored-manifest.json[122-125]

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

---