fix: keep every full-window overlay clickable over the titlebar
The drag-region fix applied to six dialogs left seven overlays uncovered, including two added in the same batch, so their controls still stopped responding to hover and clicks where they overlapped the native titlebar. Three overlays used inset: 38px 0 0 to dodge the titlebar instead of releasing the drag region, leaving an unmasked strip. Replace the per-dialog declarations with one shared selector covering all fifteen overlays and give each one inset: 0. Add a regression test that discovers every fixed overlay from the stylesheet and fails when a new one misses the shared rule, so this stops being fixed one dialog at a time. Release note: 修复 MCP 编辑器、发布说明、远端目录选择、HTML 预览、设置、跨项目活动和外部 知识库实例等弹窗与标题栏重叠时,控件无法悬停和点击的问题。
This commit is contained in:
@@ -127,6 +127,33 @@ describe('WorkspacePrimitives', () => {
|
||||
)
|
||||
})
|
||||
|
||||
it('releases the native drag region for every full-window overlay', () => {
|
||||
const noDragBlock = stylesheet.match(
|
||||
/:is\(([^)]*(?:-backdrop|-modal)[^)]*)\)\s*\{\s*-webkit-app-region:\s*no-drag;\s*\}/u
|
||||
)
|
||||
expect(noDragBlock).not.toBeNull()
|
||||
const covered = new Set(
|
||||
noDragBlock![1]!.split(',').map((selector) => selector.trim())
|
||||
)
|
||||
// Any fixed overlay painting over .brand or .topbar must release the drag
|
||||
// region, otherwise the native titlebar keeps the pointer and its controls
|
||||
// stop responding to hover and clicks.
|
||||
const overlays = [
|
||||
...stylesheet.matchAll(
|
||||
/^(\.[\w-]*(?:backdrop|modal))\s*\{([^}]*)\}/gmu
|
||||
)
|
||||
].filter(([, , body]) => /position:\s*fixed/u.test(body!))
|
||||
expect(overlays.length).toBeGreaterThan(10)
|
||||
for (const [, selector, body] of overlays) {
|
||||
expect(covered, `${selector} must release the drag region`).toContain(
|
||||
selector
|
||||
)
|
||||
expect(body, `${selector} must cover the whole window`).toMatch(
|
||||
/inset:\s*0;/u
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
it('uses bundled variable fonts and readable shared type tokens', () => {
|
||||
expect(rendererEntry).toContain(
|
||||
"@fontsource-variable/noto-sans-sc/wght.css"
|
||||
|
||||
+30
-13
@@ -2878,7 +2878,6 @@ textarea:focus-visible {
|
||||
background: var(--overlay-backdrop);
|
||||
inset: 0;
|
||||
place-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.project-create-card {
|
||||
@@ -2895,7 +2894,6 @@ textarea:focus-visible {
|
||||
box-shadow: var(--shadow-dialog);
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.project-create-card > header {
|
||||
@@ -2906,7 +2904,6 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 auto;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.project-create-card .project-create-card__close {
|
||||
@@ -2915,7 +2912,6 @@ textarea:focus-visible {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 auto;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.project-create-card__body {
|
||||
@@ -3746,6 +3742,33 @@ textarea:focus-visible {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/*
|
||||
* Overlays are portalled to document.body and cover the whole window, so they
|
||||
* paint over the .brand and .topbar drag regions. Without no-drag the native
|
||||
* titlebar keeps the pointer and their controls stop responding to hover and
|
||||
* clicks. Every full-window overlay must match this selector; extend the list
|
||||
* rather than adding a per-dialog copy.
|
||||
*/
|
||||
:is(
|
||||
.project-create-backdrop,
|
||||
.remote-directory-picker-backdrop,
|
||||
.html-preview-viewer-backdrop,
|
||||
.image-viewer-backdrop,
|
||||
.release-notes-backdrop,
|
||||
.settings-backdrop,
|
||||
.channel-qr-backdrop,
|
||||
.feedback-dialog-backdrop,
|
||||
.document-parsing-diagnostic-backdrop,
|
||||
.mcp-editor-backdrop,
|
||||
.knowledge-confirm-dialog-backdrop,
|
||||
.knowledge-library-dialog-backdrop,
|
||||
.knowledge-dialog-backdrop,
|
||||
.project-activity__backdrop,
|
||||
.external-knowledge-modal
|
||||
) {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@@ -5916,7 +5939,7 @@ button > svg {
|
||||
display: grid;
|
||||
padding: var(--space-4);
|
||||
background: var(--overlay-backdrop);
|
||||
inset: 38px 0 0;
|
||||
inset: 0;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@@ -6955,7 +6978,6 @@ button > svg {
|
||||
}
|
||||
|
||||
.image-viewer-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
@@ -9936,7 +9958,6 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.channel-qr-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: var(--z-dialog);
|
||||
display: grid;
|
||||
@@ -10062,7 +10083,6 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.feedback-dialog-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: var(--z-dialog);
|
||||
display: grid;
|
||||
@@ -10752,7 +10772,6 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.document-parsing-diagnostic-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: var(--z-dialog);
|
||||
display: grid;
|
||||
@@ -11881,7 +11900,7 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
display: grid;
|
||||
padding: var(--space-4);
|
||||
background: var(--overlay-backdrop);
|
||||
inset: 38px 0 0;
|
||||
inset: 0;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@@ -12798,7 +12817,6 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.knowledge-confirm-dialog-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: var(--z-dialog);
|
||||
display: grid;
|
||||
@@ -12841,7 +12859,6 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
}
|
||||
|
||||
.knowledge-library-dialog-backdrop {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
z-index: var(--z-dialog);
|
||||
display: grid;
|
||||
@@ -16662,7 +16679,7 @@ details.settings-section > :not(summary) + :not(summary) {
|
||||
display: grid;
|
||||
padding: var(--space-4);
|
||||
background: var(--overlay-backdrop);
|
||||
inset: 38px 0 0;
|
||||
inset: 0;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user