From c93776e297e8d6bb6c02f95fbb990fd4cf716d8b Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Fri, 5 Jun 2026 09:16:21 +0100
Subject: [PATCH] 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.
---
 .../src/core/components/shared/tooltip/Tooltip.module.css    | 1 -
 .../editor/src/core/services/googleDrivePickerService.ts     | 5 +++++
 frontend/editor/src/core/styles/zIndex.ts                    | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css b/frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css
index 09c5520d7..e2b5ecca1 100644
--- a/frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css
+++ b/frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css
@@ -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;
diff --git a/frontend/editor/src/core/services/googleDrivePickerService.ts b/frontend/editor/src/core/services/googleDrivePickerService.ts
index c4545d549..ac4dbd116 100644
--- a/frontend/editor/src/core/services/googleDrivePickerService.ts
+++ b/frontend/editor/src/core/services/googleDrivePickerService.ts
@@ -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);
       }
diff --git a/frontend/editor/src/core/styles/zIndex.ts b/frontend/editor/src/core/styles/zIndex.ts
index d58b8503c..be83afebe 100644
--- a/frontend/editor/src/core/styles/zIndex.ts
+++ b/frontend/editor/src/core/styles/zIndex.ts
@@ -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;