Fix z-index conflicts: Google Drive picker, automate dropdowns, tooltips (#6513)

## Summary

## What changed

### 1. Google Drive Picker now renders above the FileManager modal
`frontend/editor/src/core/services/googleDrivePickerService.ts`

The picker is opened from inside the FileManager modal
(`Z_INDEX_FILE_MANAGER_MODAL = 1200`), but Google's Picker defaults to
z-index ~1001 - so it landed *behind* the modal that invoked it. Added
`setZIndex(Z_INDEX_OVER_FILE_MANAGER_MODAL)` to the builder.

### 2. `Z_INDEX_AUTOMATE_DROPDOWN` no longer collides with
`Z_INDEX_FILE_MANAGER_MODAL`
`frontend/editor/src/core/styles/zIndex.ts`

Both constants were `1200`. The automate dropdown only needs to sit
above the automate modal (1100), so dropped it to `1150`. This keeps
automate dropdowns above their parent modal but reliably below the file
manager scrim when the two overlap.

Confirmed callers - all are dropdowns inside automate-modal tool
settings:
- `DropdownListWithFooter.tsx`
- `AddPageNumbersAppearanceSettings.tsx`
- `AddPasswordSettings.tsx`
- `StampPositionFormattingSettings.tsx`
- and several other `*Settings.tsx` files

All keep working as intended (1150 > 1100).

### 3. Tooltip z-index honours the documented hierarchy again
`frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css`

`Tooltip.tsx` sets `zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE` (1300)
inline, but the CSS module had a hardcoded `z-index: 9999` that overrode
it. Removed the stale CSS rule so tooltips render at the intended 1300
level rather than floating above almost everything.
This commit is contained in:
Anthony Stirling
2026-06-05 08:16:21 +00:00
committed by GitHub
parent 1698769928
commit c93776e297
3 changed files with 6 additions and 2 deletions
@@ -10,7 +10,6 @@
font-size: 0.875rem;
line-height: 1.5;
pointer-events: auto;
z-index: 9999;
transition:
opacity 100ms ease-out,
transform 100ms ease-out;
@@ -4,6 +4,7 @@
*/
import { loadScript } from "@app/utils/scriptLoader";
import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
const SCOPES = "https://www.googleapis.com/auth/drive.readonly";
const SESSION_STORAGE_ID = "googleDrivePickerAccessToken";
@@ -202,6 +203,10 @@ class GoogleDrivePickerService {
.addView(view2)
.setCallback((data: any) => this.pickerCallback(data, resolve, reject));
(builder as unknown as { setZIndex(z: number): void }).setZIndex(
Z_INDEX_OVER_FILE_MANAGER_MODAL,
);
if (options.multiple) {
builder.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
}
+1 -1
View File
@@ -12,7 +12,7 @@ export const Z_INDEX_OVER_FILE_MANAGER_MODAL = 1300;
export const Z_INDEX_AUTOMATE_MODAL = 1100;
// Dropdowns/Popovers inside automation modals need to be above the modal
export const Z_INDEX_AUTOMATE_DROPDOWN = 1200;
export const Z_INDEX_AUTOMATE_DROPDOWN = 1150;
// page editor Zindexes
export const Z_INDEX_HOVER_ACTION_MENU = 100;