tag-overlap-fix-oscar-trace

Type: bug-fix
Date: 2026-07-29
Project: oscar-web (FES inspector + Edge Tools panel work)
Thread: oscar-website (415655444668635)

Tag Overlap Fix — oscar-trace.css

2026-07-29 12:14 BST

**The bug**: 36 .oscar-badge elements (trace annotations) rendered with z-index 999997 which is ABOVE the dev panel (z=9999). When the panel was focused, the badges covered the panel's input/buttons.

**Why this matters**: Dev panel became unusable when focused because trace tags were painted on top.

**The fix** (1 line of CSS in oscar-trace.css):
```css
html:has(.oscar-pm-panel[data-focused="1"]) .oscar-badge { display: none; }
```

Uses the `:has()` selector to hide badges only when the panel is focused. When panel is closed, badges are visible (their default behavior).

**Verified**:
- 36 badges rendered normally when panel is closed
- 0 badges visible when panel is focused
- 36 badges reappear when panel loses focus

**Files**:
- /var/www/freshvibeapps/clients/oscar-web/app-fragments/oscar-trace/oscar-trace.css (2357 bytes)
- /var/www/freshvibeapps/preview-clients/oscar-web-2/app-fragments/oscar-trace/oscar-trace.css (2357 bytes, matched)