fix(ssh): raise host-key prompt above connection dialog

This commit is contained in:
Melody Ruch authored and GitHub committed 2026-08-13 01:58:35 +08:00
1 parent 6f3895edd8
commit f88e39563d
2 files changed
+19 -1

No files matched your search

@@ -238,7 +238,16 @@ function submitSecret() {
<template>
<Dialog v-model:open="visible">
<DialogContent class="sm:max-w-[460px]" :show-close-button="false" @interact-outside.prevent @escape-key-down.prevent>
<!-- Every dialog portal teleports into <body> when its component mounts, so
body order (and therefore paint order at the shared z-50) is fixed by mount
order, not by which dialog opened last. This prompt mounts once at app start,
so a dialog mounted on demand later (e.g. the connection editor) paints over
it while still being demoted to pointer-events:none as the lower modal layer
— the prompt is invisible, the dialog is dead, and the window is stuck. This
is a blocking prompt, so keep it above every other layer in the app (the
tallest today are the image preview at 80/81 and the sidebar overlays at
100). -->
<DialogContent class="sm:max-w-[460px]" overlay-class="z-[200]" portal-class="z-[200]" :show-close-button="false" @interact-outside.prevent @escape-key-down.prevent>
<DialogHeader>
<DialogTitle>
{{ t(isSecretPrompt ? "connection.sshInteractiveTitle" : "connection.sshHostKeyVerifyTitle") }}
@@ -124,6 +124,15 @@ describe("SshHostKeyPromptDialog web bridge", () => {
expect(dialogSource).not.toContain(':dismissible="false"');
});
it("stacks above dialogs that mount later than it does", () => {
// Dialog portals teleport into <body> when their component mounts, so paint
// order at the shared z-50 follows mount order. This prompt mounts once at
// app start, so an on-demand dialog (e.g. the connection editor) would bury
// it and block the whole window. It must opt out of the default layer.
expect(dialogSource).toContain('overlay-class="z-[200]"');
expect(dialogSource).toContain('portal-class="z-[200]"');
});
it("shows an SSE host-key prompt and posts the user's acceptance", async () => {
await mountDialog();