diff --git a/docs/reference/cloud-workbench.md b/docs/reference/cloud-workbench.md index 21bdf964..16fa5dac 100644 --- a/docs/reference/cloud-workbench.md +++ b/docs/reference/cloud-workbench.md @@ -40,6 +40,15 @@ The default workbench follows the #99 VS Code-style structure: Unavailable or future controls must be disabled with blocker context. The frontend must not imply generic direct hardware control. +The center-bottom command composer is the primary user action surface. Topbar +runtime summaries, live-build indicators, dialogs, and status chips may report +context, but they must never cover or intercept clicks intended for the command +composer, Code Agent input, send controls, or quick-prompt buttons. If a fixed +or visually persistent status surface can overlap after `scrollIntoView`, mobile +reflow, or trace updates, the composer layer must win the stacking order and +non-interactive summary text must not become a pointer target. Layout/browser +smoke should treat this as a real hit-target failure, not as a test flake. + The left resource explorer is a controlled resizable column on desktop-class viewports. Its width defaults to `292px`, clamps inside a bounded range (`220px` to `420px` before viewport-specific clamping), and is changed through diff --git a/web/hwlab-cloud-web/scripts/check.mjs b/web/hwlab-cloud-web/scripts/check.mjs index 4e8bb497..caaf91f3 100644 --- a/web/hwlab-cloud-web/scripts/check.mjs +++ b/web/hwlab-cloud-web/scripts/check.mjs @@ -1117,6 +1117,8 @@ assert.match(html, /id="live-build-latest"/); assert.match(html, /id="live-build-list"/); assert.match(html, /id="live-build-toggle"[^>]*aria-haspopup="dialog"[^>]*aria-expanded="false"/); assert.match(styles, /\.live-build-summary\s*{/); +assert.match(styles, /\.topbar\s*{[^}]*position:\s*relative;[^}]*z-index:\s*1;/s); +assert.match(styles, /\.command-bar\s*{[^}]*position:\s*relative;[^}]*z-index:\s*2;/s); assert.match(app, /initLiveBuildOverlay/); assert.match(app, /openWorkbenchDialog/); assert.match(app, /aria-expanded/); @@ -1131,6 +1133,7 @@ assert.match(app, /liveBuildDesiredStateText/); assert.match(app, /外部镜像或非 HWLAB 构建产物/); assert.doesNotMatch(app, /artifact report|artifact-report/); assert.match(app, /live health/); +assert.match(styles, /\.live-build-summary-label\s*{[^}]*pointer-events:\s*none;/s); assert.match(styles, /\.live-build-summary-label\s*{[^}]*min-width:\s*0;[^}]*max-width:\s*100%;[^}]*overflow:\s*hidden;[^}]*text-overflow:\s*ellipsis;[^}]*white-space:\s*nowrap;/s); assert.match(styles, /\.live-build-list\s*{[^}]*min-width:\s*0;[^}]*max-height:\s*min\(352px,\s*calc\(58dvh - 54px\)\);[^}]*overflow:\s*auto;/s); assert.match(styles, /\.live-build-row-head\s*{[^}]*grid-template-columns:\s*minmax\(0,\s*0\.8fr\)\s*minmax\(0,\s*1\.2fr\);/s); diff --git a/web/hwlab-cloud-web/styles.css b/web/hwlab-cloud-web/styles.css index b182e885..bb491cec 100644 --- a/web/hwlab-cloud-web/styles.css +++ b/web/hwlab-cloud-web/styles.css @@ -473,6 +473,8 @@ h3 { } .topbar { + position: relative; + z-index: 1; min-height: 82px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px) auto; @@ -555,6 +557,7 @@ h3 { } .live-build-summary-label { + pointer-events: none; min-width: 0; max-width: 100%; overflow: hidden; @@ -1520,6 +1523,11 @@ h3 { overflow-wrap: anywhere; } +.command-bar { + position: relative; + z-index: 2; +} + .info-detail, .command-bar { display: grid;