From fdf1684565699e462a6014f4e0b3c6d691e98f29 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Thu, 6 Aug 2026 12:49:52 +0200
Subject: [PATCH] :bug: Fix plugin modal z index (#11109)

* :bug: Fix z-index on plugin modals

* :bug: Fix CI
---
 .../apps/composable-test-suite/package.json   | 56 +++++++++----------
 .../src/lib/modal/plugin-modal.ts             | 17 +++++-
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/plugins/apps/composable-test-suite/package.json b/plugins/apps/composable-test-suite/package.json
index 9d5446a4ea..21b2a1c1e3 100644
--- a/plugins/apps/composable-test-suite/package.json
+++ b/plugins/apps/composable-test-suite/package.json
@@ -1,30 +1,30 @@
 {
-  "name": "composable-test-suite",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "start": "vite build --watch",
-    "init": "pnpm run build && pnpm run start",
-    "build": "tsc && vite build",
-    "build:headless": "vite build --config vite.config.headless.ts",
-    "test:ci": "pnpm run build:headless && tsx ci/run-ci.ts",
-    "preview": "vite preview",
-    "bootstrap": "pnpm install --ignore-workspace && pnpm run build && pnpm run start",
-    "types:check": "tsc --noEmit",
-    "fmt": "prettier --write src ci index.html",
-    "clean": "rm -rf dist/"
-  },
-  "dependencies": {
-    "@penpot/plugin-styles": "1.4.2",
-    "@penpot/plugin-types": "1.4.2"
-  },
-  "devDependencies": {
-    "playwright": "^1.62.1",
-    "prettier": "^3.9.6",
-    "typescript": "^5.9.3",
-    "vite": "^8.2.0",
-    "vite-live-preview": "^0.4.0"
-  },
-  "packageManager": "pnpm@11.20.0+sha512.9a6f330a95b66446ea088faf1521405a8a01f07fde7124cc9958dfed52d4bb436737e65b08f85f37b46fcba375092558ac51262b816844b22f63406ed166bfee"
+    "name": "composable-test-suite",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "start": "vite build --watch",
+        "init": "pnpm run build && pnpm run start",
+        "build": "tsc && vite build",
+        "build:headless": "vite build --config vite.config.headless.ts",
+        "test:ci": "pnpm run build:headless && tsx ci/run-ci.ts",
+        "preview": "vite preview",
+        "bootstrap": "pnpm install --ignore-workspace && pnpm run build && pnpm run start",
+        "types:check": "tsc --noEmit",
+        "fmt": "prettier --write src ci index.html",
+        "clean": "rm -rf dist/"
+    },
+    "dependencies": {
+        "@penpot/plugin-styles": "1.4.2",
+        "@penpot/plugin-types": "1.4.2"
+    },
+    "devDependencies": {
+        "playwright": "^1.62.1",
+        "prettier": "^3.9.6",
+        "typescript": "^5.9.3",
+        "vite": "^8.2.0",
+        "vite-live-preview": "^0.4.0"
+    },
+    "packageManager": "pnpm@11.20.0+sha512.9a6f330a95b66446ea088faf1521405a8a01f07fde7124cc9958dfed52d4bb436737e65b08f85f37b46fcba375092558ac51262b816844b22f63406ed166bfee"
 }
diff --git a/plugins/libs/plugins-runtime/src/lib/modal/plugin-modal.ts b/plugins/libs/plugins-runtime/src/lib/modal/plugin-modal.ts
index 53ea472494..6939b8097a 100644
--- a/plugins/libs/plugins-runtime/src/lib/modal/plugin-modal.ts
+++ b/plugins/libs/plugins-runtime/src/lib/modal/plugin-modal.ts
@@ -6,7 +6,8 @@ import { dragHandler } from '../drag-handler.js';
 import modalCss from './plugin.modal.css?inline';
 import { resizeModal } from '../create-modal.js';
 
-const MIN_Z_INDEX = 3;
+const MIN_Z_INDEX = 300;
+const Z_INDEX_VAR = '--z-index-set';
 
 export class PluginModalElement extends HTMLElement {
   constructor() {
@@ -43,7 +44,19 @@ export class PluginModalElement extends HTMLElement {
         return Number(modal.style.zIndex);
       });
 
-    const maxZIndex = Math.max(...zIndexModals, MIN_Z_INDEX);
+    // Read the application z-index scale via the inherited CSS custom property
+    // `--z-index-set` (defined on :root). Custom properties pierce shadow DOM
+    // boundaries, so the value is available even though the modal uses a Shadow
+    // root. Falls back to MIN_Z_INDEX when the variable is unset or unparseable
+    // (e.g. when the runtime is used outside the Penpot app shell).
+    const declared = getComputedStyle(this)
+      .getPropertyValue(Z_INDEX_VAR)
+      .trim();
+    const parsed = Number(declared);
+    const baseZIndex =
+      Number.isFinite(parsed) && parsed > 0 ? parsed : MIN_Z_INDEX;
+
+    const maxZIndex = Math.max(...zIndexModals, baseZIndex);
 
     this.style.zIndex = (maxZIndex + 1).toString();
   }