fix: reliably hide frontend overlay when collapsed in shadow DOM

[jackgranatowski]

Problem

Panel frontendowy był zawsze widoczny gdy isOpen=false (np. po zwinięciu lub z wartości z localStorage). Mimo że był inert i pointer-events-none (interakcja poprawnie zablokowana), nie chował się wizualnie.

Przyczyna

Aplikacja montuje się w Shadow DOM (attachShadow). Tailwind v4 używa własności CSS translate zamiast transform:

.translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y) }

Jeśli --tw-translate-y nie jest zdefiniowane w shadow root (warunek @supports w @layer properties nie pasuje do przeglądarki), cała deklaracja translate jest invalid i spada do none — panel pozostaje przy right: 0, widoczny.

Poprawki

• style:visibility={isOpen ? undefined : 'hidden'} na głównym divie panelu — ukrywa go bezwarunkowo przez inline style (wyższy priorytet niż jakikolwiek CSS). Trigger tab ({#if !isOpen}) jest osobnym elementem i nie jest dotknięty.
• host.style.pointerEvents = 'auto' w syncHostBounds — ochrona przed dziedziczeniem pointer-events: none z motywu WP na element hosta shadow DOM.

Animacja otwierania (translate slide-in) nadal działa. Zamknięcie jest teraz natychmiastowe wizualnie — akceptowalny trade-off za pewne ukrywanie panelu.

---

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: 42 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: 7e9ae2f9-68ae-4bf4-9eeb-6ef277cb7a30

📥 Commits

Reviewing files that changed from the base of the PR and between 8fd931f and 78dfa20.

📒 Files selected for processing (2)

• SLASHED-for-WP/admin-app/src/AppOverlay.svelte
• SLASHED-for-WP/assets/admin-app/app.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/naprawic-problem-z-panelem-frontendowym

---

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 Shadow DOM overlay so it actually hides when collapsed

🐞 Bug fix 🕐 20-40 Minutes

AI Description

• Hide the overlay panel visually when isOpen=false using inline visibility: hidden.
• Force pointer-events: auto on the Shadow DOM host to prevent WP theme inheritance.
• Rebuild the shipped admin-app bundle to include the overlay fixes.

Diagram

graph TD
  A(("WP page DOM")) --> B(("#slashed-frontend-overlay")) --> C(("Shadow root")) --> D["AppOverlay.svelte"]
  D --> E{"isOpen?"} --> F["Panel div"]
  F --> G[/"Inline visibility"/]
  D --> H["syncHostBounds()"] --> I[/"host pointer-events:auto"/]

  subgraph Legend
    direction LR
    _dom(("DOM")) ~~~ _comp["Component/Logic"] ~~~ _css[/"Style/Policy"/]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Fix Tailwind translate support inside Shadow DOM

• ➕ Keeps close animation (slide-out) instead of instant hide
• ➕ Addresses root cause for any other translate-based utilities
• ➖ Requires reliably injecting Tailwind v4 @layer properties + custom properties into the shadow root
• ➖ More brittle across browser/supports conditions; harder to reason about than inline visibility

2. Switch to `transform: translateX(...)` instead of `translate`

• ➕ Avoids translate invalidation issues when variables are missing
• ➕ Preserves existing animation behavior
• ➖ Needs Tailwind config/class changes or custom CSS (may diverge from Tailwind v4 defaults)
• ➖ Still needs to ensure the right CSS is present/loaded inside the shadow root

3. Hide via `display: none` (or conditional rendering) when closed

• ➕ Absolutely guarantees the panel is not visible and not in layout
• ➕ Can simplify hit-testing concerns
• ➖ Loses “state preserved while collapsed” behavior unless state is lifted elsewhere
• ➖ More likely to cause layout/measurement churn on open/close

Recommendation: The chosen approach (inline visibility: hidden when closed + forcing host pointer-events:auto) is the most robust mitigation for Shadow DOM + Tailwind v4 translate-variable edge cases and hostile theme CSS inheritance. It trades away the close animation, but guarantees correctness across browsers and WP themes; that’s a reasonable priority for an overlay that must not remain visually present when collapsed.

Files changed (2) +60 / -58

Bug fix (1) +2 / -0

AppOverlay.svelteForce overlay hidden + restore Shadow-host pointer events +2/-0

Force overlay hidden + restore Shadow-host pointer events

• Ensures the overlay panel becomes visually hidden when 'isOpen=false' by applying inline 'visibility: hidden' on the main panel container. Also sets 'pointer-events: auto' on the Shadow DOM host in 'syncHostBounds()' to prevent WP theme CSS from disabling interaction on the host element.

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

Other (1) +58 / -58

app.jsRegenerate bundled admin-app JS with overlay hiding fix +58/-58

Regenerate bundled admin-app JS with overlay hiding fix

• Updates the compiled/minified admin-app bundle so the runtime behavior matches the 'AppOverlay.svelte' changes (visibility hiding + host pointer-events guard). This is a build artifact update to ship the fix.

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

[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