fix: adjust z-index and isolation for Combobox Positioner to resolve stacking issue with Inspector's event Popover

- Added styles to EventManager.scss to target the Positioner of the Base UI Combobox.
- Utilized :has() to increase z-index to 1043 and set isolation to auto, ensuring proper stacking context.
- This change addresses the issue where the Combobox Positioner was rendered behind the Inspector's event Popover.
This commit is contained in:
Nithin David Thomas 2026-04-21 18:49:16 +05:30
parent 3ce42d37ec
commit 7ff062d7a9
2 changed files with 682 additions and 636 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,15 @@
// Base UI Combobox renders its Positioner with a hardcoded `tw-isolate tw-z-50`
// in `src/components/ui/Rocket/shadcn/combobox.jsx` (shadcn primitives are not
// edited). The Positioner is portaled to <body>, so no React className can
// reach it from our Combobox call sites. `tw-isolate` creates a stacking
// context at z-50, which sits behind the Inspector's event Popover (z-1042).
//
// Fix: target the Positioner via its child Popup's [data-slot=combobox-content]
// using :has(). 1043 outranks the popover's 1042; `isolation: auto` undoes the
// stacking-context isolation so the Popup itself stacks normally.
//
// Remove once Rocket's Combobox HOC exposes Positioner-level z-index control.
:has(> [data-slot='combobox-content']) {
z-index: 1043 !important;
isolation: auto !important;
}