Admin theme CSS breaks jQuery UI dialog z-index when used with TracyDebugger/AOS #2190
Description
Summary
The new admin theme's admin.css rule forces z-index: 101 !important on .ui-front elements, which overrides the higher z-index that TracyDebugger/AOS sets on .ui-dialog. This makes modal dialogs (e.g. field editors opened from Setup > Templates) completely unclickable — the overlay covers the dialog.
Steps to Reproduce
Install TracyDebugger (or AdminOnSteroids)
Go to Setup > Templates > any template
Click a field name to open the inline field editor
The modal opens but is behind a semi-transparent overlay — nothing is clickable
Root Cause
In wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css:
.pw .ui-front:not(.ui-widget-overlay) {
z-index: 101 !important;
}
TracyDebugger/AOS sets:
.ui-widget-overlay.ui-front { z-index: 100980 !important } (overlay)
.ui-dialog { z-index: 101000 !important } (dialog)
The PW rule has higher specificity (0-3-0) than AOS's .ui-dialog (0-1-0), so !important on both means PW wins. The dialog drops to z-index 101 while the overlay stays at 100980.
Suggested Fix
Either remove !important from the PW rule, or exclude .ui-dialog from it:
.pw .ui-front:not(.ui-widget-overlay):not(.ui-dialog) {
z-index: 101 !important;
}
Workaround
In site/templates/admin/admin.css:
body .ui-dialog.ui-widget.ui-front {
z-index: 101000 !important;
}
Environment
PW 3.0.256 (dev)
AdminThemeUikit (new default theme, 2026)
TracyDebugger 2.0.21