github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-07 13:29:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix plugin modal z index (#11109)

Browse Source 
* 🐛 Fix z-index on plugin modals

* 🐛 Fix CI
This commit is contained in:
Eva Marco 2026-08-06 12:49:52 +02:00 committed by GitHub
parent 81e44afbe3
commit fdf1684565
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
plugins/apps/composable-test-suite/package.json
View File

@ -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"
}

17
plugins/libs/plugins-runtime/src/lib/modal/plugin-modal.ts
View File

@ -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();
}