fix: stop frontend overlay covering admin bar dropdowns; sync reset UI fixes by jackgranatowski · Pull Request #127 · codeslash-dev/SLASHED-Plugins

jackgranatowski · 2026-07-01T16:57:36Z

Summary

Fix the WP frontend configurator overlay covering the admin bar's dropdown submenus: the overlay (host, trigger tab, and panel) was set to z-index: 100000, one higher than the admin bar's 99999 — but the admin bar's own dropdowns share that same 99999 stacking context, so the overlay painted above them too. Lowered to 99998 in all three places that set it (PHP inline-style fallback, syncHostBounds(), and the Tailwind z-[...] classes on the trigger/panel).
Re-synced admin-app/src from the framework (codeslash-dev/SLASHED PR #468) to pull in two related configurator fixes that also apply to the WP-embedded configurator:
- A "Reset N" button in the panel header that clears just the active category's overrides.
- Per-token reset controls (TokenRow, SliderRow, PowerKnobRow, and inline resets in MiscPanel/TypographyPanel/MotionPanel) no longer rely on bare opacity-0 group-hover:opacity-100, which never became visible on touch devices or via keyboard focus.
Rebuilt assets/admin-app/{app.js,app.css} to match the synced source.

Type

fix

Checklist

Conventional Commit messages (feat:, fix:, docs:, …)
npm test — not run (no node_modules-heavy e2e run in this session; npm run verify and npm run lint:php were run and pass)
npm run lint passes (lint:php run; lint:css not modified by this change)
npm run verify passes (version metadata in sync)
Generated artifacts not hand-edited (assets/admin-app/* regenerated via npm run build:admin-app, not hand-edited)
CHANGELOG.md updated under ## [Unreleased]
Built SPA assets committed (assets/admin-app/app.js, assets/admin-app/app.css)

Notes

AppOverlay.svelte is plugin-specific (protected by .syncignore) and was edited directly here, not vendored from the framework.

Generated by Claude Code

…owns The overlay host, trigger tab, and panel were all set to z-index 100000, one higher than the WP admin bar's 99999 — but the admin bar's own dropdown submenus share that same 99999 stacking context, so the overlay ended up painting above them too. Drop the overlay to 99998 so it stays below the entire admin bar (bar + dropdowns) in all three places that set it: the PHP inline-style fallback, the JS syncHostBounds(), and the Tailwind z-[...] classes on the trigger/panel.

…from framework Pulls in codeslash-dev/SLASHED PR #468: the panel header now exposes a "Reset N" button that clears just the active category's overrides, and per-token reset controls (TokenRow, SliderRow, PowerKnobRow, and the inline resets in MiscPanel/TypographyPanel/MotionPanel) no longer rely on bare group-hover opacity, so they're reachable on touch and via keyboard focus. Rebuilt assets/admin-app/{app.js,app.css} to match.

coderabbitai · 2026-07-01T16:59:13Z

Warning

Review limit reached

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

Next review available in: 41 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: 089cf995-ae06-483d-96fc-2d171df97dc8

📥 Commits

Reviewing files that changed from the base of the PR and between 6fa8f86 and e8526e2.

📒 Files selected for processing (13)

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/admin-app/src/components/DomainPanel.svelte
SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte
SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte
SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte
SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte
SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte
SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte
SLASHED-for-WP/assets/admin-app/app.css
SLASHED-for-WP/assets/admin-app/app.js
SLASHED-for-WP/includes/class-frontend-configurator.php

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/configurator-reset-ui-fixes-wt1jqs

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

_{Comment @coderabbitai help to get the list of available commands.}

qodo-code-review · 2026-07-01T17:00:29Z

PR Summary by Qodo

Fix configurator overlay stacking vs WP admin bar; add category reset + accessible reset controls

🐞 Bug fix ✨ Enhancement 🕐 40+ Minutes

AI Description

• Lower frontend configurator overlay z-index so WP admin bar dropdowns remain clickable.
• Add per-category “Reset N” action and improve reset control visibility on touch/keyboard.
• Sync admin-app source changes and regenerate compiled JS/CSS assets.

Diagram

graph TD
  A["WP frontend page"] --> B["WP admin bar (z=99999)"] --> C["Plugin PHP overlay container"] --> D["AppOverlay.svelte (host/trigger/panel)"] --> E["Configurator UI (App.svelte)"] --> F[("Bundled assets: app.js/app.css")]

High-Level Assessment

The following are alternative approaches to this PR:

1. Derive overlay z-index from WP admin bar CSS variable

➕ Avoids hardcoding 99998/99999 and adapts if WP changes defaults
➕ Keeps stacking intent explicit (admin bar wins)
➖ WP doesn’t expose admin bar z-index as a stable variable by default
➖ Still needs a fallback constant for non-standard themes/plugins

2. Keep per-domain reset logic inside DomainPanel

➕ Encapsulates domain-specific behavior with the domain UI component
➕ Reduces state/logic in App.svelte
➖ Harder to support non-token domains/panels consistently
➖ Requires more prop plumbing and duplicates domain-pattern logic across callers

Recommendation: The chosen approach is appropriate: lowering the overlay z-index to 99998 is the minimal, reliable fix for admin bar dropdown clickability, and centralizing the “Reset N” behavior in App.svelte aligns the reset action with the global overrides state (and supports domains without token patterns). If WP z-index variability becomes an issue, consider adding a configurable z-index (filter/setting) or an optional CSS-driven override.

Files changed (13) +121 / -109

Enhancement (1) +29 / -3

App.svelteAdd per-category reset button and override counting by domain patterns +29/-3

Add per-category reset button and override counting by domain patterns
• Introduces derived domain pattern lists (via DOMAIN_PATTERNS) to count overrides scoped to the active category. Adds a “Reset N” button in the panel header that clears only overrides matching the active domain patterns.
SLASHED-for-WP/admin-app/src/App.svelte

Bug fix (8) +17 / -16

AppOverlay.svelteLower overlay z-index and keep reset-confirm dialog within overlay stack +6/-5

Lower overlay z-index and keep reset-confirm dialog within overlay stack
• Drops the overlay host, trigger, and panel z-index from 100000 to 99998 so WP admin bar dropdowns remain on top. Adjusts the reset confirmation dialog z-index to remain above the panel without escaping the admin bar stacking order.
SLASHED-for-WP/admin-app/src/AppOverlay.svelte

PowerKnobRow.svelteMake per-token reset control visible via focus/touch, not hover-only +1/-1

Make per-token reset control visible via focus/touch, not hover-only
• Updates Tailwind classes so the reset action is not hidden behind hover-only opacity on small/touch screens. Ensures visibility via focus and group-focus-within for keyboard access.
SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte

SliderRow.svelteFix reset and raw-toggle visibility on touch/keyboard +2/-2

Fix reset and raw-toggle visibility on touch/keyboard
• Replaces hover-only opacity controls with responsive/focus-aware classes so toggles and reset are discoverable on touch devices and via keyboard navigation.
SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte

TokenRow.svelteFix token reset icon visibility for non-hover interactions +1/-1

Fix token reset icon visibility for non-hover interactions
• Makes the reset icon visible by default on small screens and on focus, while preserving hover behavior on larger screens. Improves accessibility for touch and keyboard users.
SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte

MiscPanel.svelteAdjust inline reset visibility to work without hover +1/-1

Adjust inline reset visibility to work without hover
• Updates inline reset button styling so it becomes visible on focus and on small/touch screens, not only on hover.
SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte

MotionPanel.svelteAdjust Motion panel reset visibility for touch/focus +1/-1

Adjust Motion panel reset visibility for touch/focus
• Changes the stagger reset button to use responsive and focus-aware opacity classes, making it reachable without hover.
SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte

TypographyPanel.svelteUpdate multiple typography resets to be focus/touch accessible +4/-4

Update multiple typography resets to be focus/touch accessible
• Reworks several reset buttons across typography sections to avoid hover-only visibility. Ensures resets appear on small screens and on focus/focus-within for keyboard users.
SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte

class-frontend-configurator.phpLower PHP fallback overlay container z-index below WP admin bar +1/-1

Lower PHP fallback overlay container z-index below WP admin bar
• Adjusts the inline-style fallback z-index for the frontend overlay container from 100000 to 99998. This keeps the overlay below the WP admin bar and its dropdown menus even before JS applies styles.
SLASHED-for-WP/includes/class-frontend-configurator.php

Refactor (1) +0 / -15

DomainPanel.svelteRemove per-domain reset logic (moved to App.svelte) +0/-15

Remove per-domain reset logic (moved to App.svelte)
• Deletes domain override counting and reset handler previously owned by DomainPanel. The reset behavior is now handled at the App level alongside global overrides state.
SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte

Other (3) +75 / -75

.vendored-manifest.jsonUpdate vendoring manifest metadata for local re-sync +51/-51

Update vendoring manifest metadata for local re-sync
• Switches vendored source references from GitHub to local paths and updates the sync timestamp. This reflects the re-synced admin-app/src contents pulled into the plugin.
SLASHED-for-WP/admin-app/.vendored-manifest.json

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

Regenerate compiled CSS bundle for admin-app
• Updates the built Tailwind output to reflect new z-index values and focus/touch visibility class changes. This is a generated artifact corresponding to the synced source.
SLASHED-for-WP/assets/admin-app/app.css

app.jsRegenerate compiled JS bundle for admin-app +23/-23

Regenerate compiled JS bundle for admin-app
• Rebuilds the compiled admin-app JavaScript to include the per-category reset button and related UI behavior changes from the synced Svelte source.
SLASHED-for-WP/assets/admin-app/app.js

qodo-code-review · 2026-07-01T17:12:17Z

Code Review by Qodo

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

Context used

✅ Compliance rules (platform): 1 rule

1. src/App.svelte vendored edited ✗ Dismissed 📘 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 changed in the PR.

Code

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

+  function handleResetDomain() {
+    const patch: Record<string, null> = {};
+    for (const k of Object.keys(overrides)) {
+      if (domainPatterns.some((p) => k.includes(p))) patch[k] = null;
+    }
+    handleBulkChange(patch);
+  }

Relevance

⭐⭐⭐ High
Repo added vendored manifest + “DO NOT edit” guidance; similar vendored-file violation flagged in PR
#125.
PR-#111
PR-#125

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The vendored manifest lists src/App.svelte as a vendored file, and the PR branch version of
SLASHED-for-WP/admin-app/src/App.svelte contains new code (handleResetDomain) showing it was
modified in this change set, triggering the rule’s failure criteria.
Rule 1514148: Do not modify vendored files listed in .vendored-manifest.json
SLASHED-for-WP/admin-app/.vendored-manifest.json[14-17]
SLASHED-for-WP/admin-app/src/App.svelte[154-160]

Agent prompt

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

## Issue description
This PR modifies a file that is explicitly marked as vendored in `SLASHED-for-WP/admin-app/.vendored-manifest.json`, which is not allowed by the compliance rule.

## Issue Context
`src/App.svelte` appears in the vendored manifest, meaning changes must not be made directly in this repository/PR.

## Fix Focus Areas
- SLASHED-for-WP/admin-app/.vendored-manifest.json[14-17]
- SLASHED-for-WP/admin-app/src/App.svelte[154-160]

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

2. ~~Reset modal underlays UI~~ ✓ Resolved 🐞 Bug ≡ Correctness

Description

In AppOverlay.svelte the reset-all confirmation backdrop z-index was lowered to z-10, which can
allow other overlay children with higher z-index (e.g., SidebarNav tooltips z-50, ColorsPanel
tooltip z-20) to render above the confirmation layer, undermining the modal's “always on top”
guarantee. This can cause visual bleed-through (and click interception if any higher-z elements have
pointer-events enabled).

Code

SLASHED-for-WP/admin-app/src/AppOverlay.svelte[R433-437]

  <!-- Reset-all confirmation dialog -->
  {#if showResetConfirm}
    <div
-      class="absolute inset-0 z-[100001] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      class="absolute inset-0 z-10 flex items-center justify-center bg-black/60 backdrop-blur-sm"
      role="dialog"

Relevance

⭐⭐ Medium
No clear prior reviews enforcing modal z-index; reset modal changes reviewed before but not
stacking-order specifics.
PR-#91

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The reset-confirm overlay is now z-10, while the overlay contains descendants with higher z-index
values (e.g., SidebarNav tooltip z-50 and ColorsPanel tooltip z-20). Because the overlay panel
uses translate transforms, it creates a stacking context where these z-indexes compete, so higher-z
children can paint above the modal overlay.
SLASHED-for-WP/admin-app/src/AppOverlay.svelte[303-318]
SLASHED-for-WP/admin-app/src/AppOverlay.svelte[433-440]
SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte[56-58]
SLASHED-for-WP/admin-app/src/components/panels/ColorsPanel.svelte[453-460]

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 reset-all confirmation overlay in `AppOverlay.svelte` uses `z-10`, but other elements rendered inside the same overlay panel use higher z-index values (e.g. `z-20`, `z-50`). This can result in those elements painting above the modal overlay, breaking the expectation that the confirmation dialog fully covers the UI.

### Issue Context
The overlay panel is a transformed element (`translate-x-*`), which creates a stacking context; z-index competition between descendants matters.

### Fix
Set the reset-confirm backdrop to a z-index higher than any in-panel elements (e.g. `z-[100]`, `z-[1000]`, or restore the prior `z-[100001]`) so it reliably renders above tooltips/popovers within the overlay.

### Fix Focus Areas
- SLASHED-for-WP/admin-app/src/AppOverlay.svelte[433-475]

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

The reset-all confirmation backdrop was dropped to z-10 when its z-index was decoupled from the old 100000-based scheme, but the same overlay panel renders tooltips at z-20 (ColorsPanel) and z-50 (SidebarNav) — both of which would then paint over the modal. Bump it to z-[100], comfortably above every other z-index used inside the panel's stacking context. (caught by automated review on #127)

Pulls in codeslash-dev/SLASHED#468 (205f9ab): the per-category reset button merged in #127 scoped its overrides by raw substring matching against the active domain's own pattern list, which over-matches since DOMAIN_PATTERNS substrings overlap across domains (e.g. layout's "-bg-" also appears in color tokens like --sf-color-bg--active). Resetting Layout could silently wipe out unrelated Colors overrides. Now scoped via domainOf(k) === domain, the same classifier already used for the sidebar override badges. Rebuilt assets/admin-app/app.js to match.

…ui-fixes-wt1jqs fix: correct category-reset domain scoping regression from #127

claude added 2 commits July 1, 2026 16:40

qodo-code-review Bot reviewed Jul 1, 2026

View reviewed changes

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

Comment thread SLASHED-for-WP/admin-app/src/AppOverlay.svelte

jackgranatowski merged commit 1af7002 into main Jul 1, 2026
9 checks passed

jackgranatowski mentioned this pull request Jul 1, 2026

fix: correct category-reset domain scoping regression from #127 #128

Merged

7 tasks

jackgranatowski added a commit that referenced this pull request Jul 1, 2026

Merge pull request #128 from codeslash-dev/claude/configurator-reset-…

d0f9cad

…ui-fixes-wt1jqs fix: correct category-reset domain scoping regression from #127

This was referenced Jul 2, 2026

chore: re-sync vendored configurator core from SLASHED main (PR-SYNC) #140

Merged

chore: technical debt audit remediation — full batch #146

Merged

Sync Studio light-mode support into the admin-app #154

Merged

Navigation Menu

fix: stop frontend overlay covering admin bar dropdowns; sync reset UI fixes - #127

fix: stop frontend overlay covering admin bar dropdowns; sync reset UI fixes#127
jackgranatowski merged 3 commits into
mainfrom
claude/configurator-reset-ui-fixes-wt1jqs

jackgranatowski commented Jul 1, 2026

Uh oh!

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

Review limit reached

Uh oh!

qodo-code-review Bot commented Jul 1, 2026

Uh oh!

qodo-code-review Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jackgranatowski commented Jul 1, 2026

Summary

Type

Checklist

Notes

Uh oh!

coderabbitai Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

qodo-code-review Bot commented Jul 1, 2026

PR Summary by Qodo

Uh oh!

qodo-code-review Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

qodo-code-review Bot commented Jul 1, 2026 •

edited

Loading