diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 8aab217b7..5ae7406de 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -21,12 +21,22 @@ body { min-height: 0; } +:root { + /* 网页内自绘标题栏占用的顶部高度;portal 到 body 的固定弹层也要从它下方开始。 */ + --window-chrome-height: 50px; +} + +/* portal 到 body 的全屏固定弹层从标题栏下方开始,避免与自绘标题栏重叠。 */ +.fixed.inset-0 { + top: var(--window-chrome-height); +} + /* 桌面壳统一承载标题栏,让 Tauri 与浏览器预览共用同一表面。 */ .window-chrome { --window-chrome-height: 50px; --window-chrome-title-side-space: 300px; - display: grid; - grid-template-rows: var(--window-chrome-height) minmax(0, 1fr); + position: relative; + display: block; width: 100%; height: 100dvh; min-height: 0; @@ -36,7 +46,10 @@ body { } .window-chrome__bar { - position: relative; + position: absolute; + top: 0; + right: 0; + left: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); @@ -254,7 +267,9 @@ body { .window-chrome__content { position: relative; z-index: 0; + box-sizing: border-box; height: 100%; + padding-top: var(--window-chrome-height); min-width: 0; min-height: 0; overflow: hidden; @@ -300,6 +315,15 @@ body { overflow: auto; } +.window-chrome__content + > .launcher-shell + .launcher-main + > .platform-theme.h-screen { + height: 100%; + min-height: 0; + overflow: auto; +} + .window-chrome__content .launcher-main:has(.game-project-workbench) { display: flex; flex-direction: column; @@ -320,6 +344,10 @@ body { } @media (max-width: 760px) { + :root { + --window-chrome-height: 46px; + } + .window-chrome { --window-chrome-height: 46px; } @@ -2978,7 +3006,10 @@ textarea { .launcher-dialog-backdrop { position: fixed; - inset: 0; + top: var(--window-chrome-height); + right: 0; + bottom: 0; + left: 0; z-index: 200; display: grid; padding: 24px; @@ -3272,7 +3303,10 @@ h2 { .settings-overlay { position: fixed; - inset: 0; + top: var(--window-chrome-height); + right: 0; + bottom: 0; + left: 0; z-index: 220; display: grid; place-items: center; @@ -7081,7 +7115,10 @@ iframe.preview-frame { .game-approval-backdrop { position: fixed; - inset: 0; + top: var(--window-chrome-height); + right: 0; + bottom: 0; + left: 0; z-index: 260; display: grid; padding: 20px; @@ -7659,7 +7696,10 @@ iframe.preview-frame { .gdd-approval-card__dialog-backdrop { position: fixed; - inset: 0; + top: var(--window-chrome-height); + right: 0; + bottom: 0; + left: 0; z-index: 220; display: grid; padding: 24px; diff --git a/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts index 9916904e2..9ce90eb9b 100644 --- a/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts +++ b/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts @@ -1,3 +1,6 @@ +import fs from 'node:fs'; +import path from 'node:path'; + import { APP_VERSION } from '../../src/app/appMetadata'; import { act, @@ -18,6 +21,20 @@ import { } from './harness'; export function registerAgentStatusDerivationTests() { + it('keeps fixed overlays below the in-page window title bar', () => { + const styles = fs.readFileSync( + path.join(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'), + 'utf8', + ); + expect(styles).toContain('--window-chrome-height: 50px;'); + expect(styles).toContain('.fixed.inset-0 {'); + expect(styles).toContain('top: var(--window-chrome-height);'); + expect(styles).toContain('.settings-overlay {'); + expect(styles).toContain('.launcher-dialog-backdrop {'); + expect(styles).toContain('.game-approval-backdrop {'); + expect(styles).toContain('.gdd-approval-card__dialog-backdrop {'); + }); + it('derives agent card status from the latest run trace step', () => { const manifest = createGameCreationAppManifest( 'local-project-draft',