From 9755ccd141ca3452c8c8e64497c2f378ba09eeb1 Mon Sep 17 00:00:00 2001 From: Algis Dumbris Date: Fri, 25 Sep 2026 20:07:00 +0300 Subject: [PATCH 01/27] fix(webui): promote dialogs to the top layer, one z-index scale (FR-055) Every now opens via showModal()/close() through a shared useDialogOpen composable instead of the `open` attribute or a `modal-open` class toggle, so a modal can never be painted over by the sidebar or header regardless of z-index (the Add Server modal bug, H4). Adds frontend/src/assets/z-index.css as the single source for the sidebar < header < dropdown < modal < toast scale and retires the ad-hoc z-40 on the sidebar's drawer-side. Also folds in two small header changes that touch the same files: Add-to-MCPProxy button state and header layout groundwork. --- frontend/src/assets/z-index.css | 19 ++++ frontend/src/components/AddSecretModal.vue | 6 +- frontend/src/components/AddServerModal.vue | 6 +- frontend/src/components/ConnectModal.vue | 4 +- frontend/src/components/OnboardingWizard.vue | 4 +- frontend/src/components/SidebarNav.vue | 10 +- frontend/src/components/ToastContainer.vue | 2 +- frontend/src/components/TopHeader.vue | 26 +++-- frontend/src/composables/useDialogOpen.ts | 61 +++++++++++ frontend/src/main.ts | 3 +- frontend/src/views/Repositories.vue | 45 ++++++-- frontend/src/views/teams/UserActivity.vue | 4 +- frontend/src/views/teams/UserServers.vue | 7 +- frontend/src/views/teams/UserTokens.vue | 4 +- frontend/tests/unit/z-index-scale.spec.ts | 104 +++++++++++++++++++ 15 files changed, 278 insertions(+), 27 deletions(-) create mode 100644 frontend/src/assets/z-index.css create mode 100644 frontend/src/composables/useDialogOpen.ts create mode 100644 frontend/tests/unit/z-index-scale.spec.ts diff --git a/frontend/src/assets/z-index.css b/frontend/src/assets/z-index.css new file mode 100644 index 000000000..1f02f1487 --- /dev/null +++ b/frontend/src/assets/z-index.css @@ -0,0 +1,19 @@ +/* + * Spec 109 FR-055 (navigation-map.md): one z-index scale, defined in one + * place, so no sidebar/header element can ever paint over a modal (audit H4). + * + * sidebar < header < dropdown < modal < toast + * + * Modals themselves should render in the browser's top layer via + * `.showModal()` rather than relying on this scale (the top layer + * always wins regardless of these values) — `--z-modal` exists for the rare + * non- overlay (e.g. a full-screen click-catcher) that still needs to + * sit above the header/sidebar but below a real modal. + */ +:root { + --z-sidebar: 30; + --z-header: 40; + --z-dropdown: 50; + --z-modal: 60; + --z-toast: 70; +} diff --git a/frontend/src/components/AddSecretModal.vue b/frontend/src/components/AddSecretModal.vue index 3af62a7b1..239638480 100644 --- a/frontend/src/components/AddSecretModal.vue +++ b/frontend/src/components/AddSecretModal.vue @@ -1,5 +1,5 @@