fix: 收紧 v0.2 Device Pod 右栏首屏布局
This commit is contained in:
Codex
@@ -86,8 +86,11 @@ assert.doesNotMatch(rightSidebar, /readonly-rpc|复核入口/iu, "right sidebar
|
||||
assert.doesNotMatch(rightSidebar, /data-hardware-tab|m3-control|hardware-list|wiring-body|records-list/iu, "right sidebar must not keep legacy hardware panels");
|
||||
assert.match(rightSidebar, /class="summary-tile"[^>]*role="button"[^>]*tabindex="0"/u, "Pod summary is a click/keyboard summary tile");
|
||||
assert.match(rightSidebar, /<dialog\b[\s\S]*id="device-detail-dialog"/u, "summary details must open in a dialog");
|
||||
assert.match(cssRule(styles, ".right-sidebar"), /grid-auto-rows:\s*max-content;/u, "right sidebar rows must keep Device Pod workspace from being squeezed by the status area");
|
||||
assert.doesNotMatch(cssRule(styles, ".device-pod-workspace"), /minmax\(180px,\s*1fr\)/u, "Device Pod workspace must not use a 1fr event row inside the sidebar scroll column");
|
||||
assert.match(cssRule(styles, ".right-sidebar"), /grid-template-rows:\s*auto\s+auto\s+auto\s+auto\s+minmax\(0,\s*1fr\);/u, "right sidebar must reserve remaining height for Device Pod workspace instead of stacking it below the status area");
|
||||
assert.match(cssRule(styles, ".right-sidebar"), /overflow-y:\s*hidden;/u, "right sidebar must not rely on outer scrolling to reveal Device Pod workspace");
|
||||
assert.match(cssRules(styles, ".device-pod-workspace"), /grid-template-rows:\s*auto\s+minmax\(0,\s*1fr\);/u, "Device Pod workspace must keep the event stream inside its remaining row");
|
||||
assert.match(cssRules(styles, ".device-pod-workspace"), /overflow:\s*hidden;/u, "Device Pod workspace must not be pushed below the right sidebar viewport");
|
||||
assert.match(cssRule(styles, ".device-event-panel"), /grid-template-rows:\s*auto\s+minmax\(132px,\s*1fr\);/u, "event stream must keep a bounded scrollable body inside the visible workspace");
|
||||
|
||||
for (const selector of [
|
||||
".device-pod-status",
|
||||
@@ -276,6 +279,17 @@ function cssRule(source, selector) {
|
||||
return bodyEnd >= 0 ? source.slice(match.index, bodyEnd + 1) : source.slice(match.index);
|
||||
}
|
||||
|
||||
function cssRules(source, selector) {
|
||||
const pattern = new RegExp(`${escapeRegExp(selector)}\\s*\\{`, "gu");
|
||||
const rules = [];
|
||||
for (const match of source.matchAll(pattern)) {
|
||||
const bodyStart = match.index + match[0].length;
|
||||
const bodyEnd = source.indexOf("}", bodyStart);
|
||||
rules.push(bodyEnd >= 0 ? source.slice(match.index, bodyEnd + 1) : source.slice(match.index));
|
||||
}
|
||||
return rules.join("\n");
|
||||
}
|
||||
|
||||
function functionBody(source, name) {
|
||||
const match = new RegExp(`function\\s+${escapeRegExp(name)}\\s*\\([^)]*\\)\\s*\\{`, "u").exec(source);
|
||||
if (!match) return "";
|
||||
|
||||
@@ -722,14 +722,14 @@ h3 {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
gap: 3px;
|
||||
padding: 8px 10px;
|
||||
background: var(--surface-2);
|
||||
border-left: 4px solid var(--accent);
|
||||
}
|
||||
|
||||
.probe-card strong {
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -737,6 +737,11 @@ h3 {
|
||||
|
||||
.probe-card small {
|
||||
color: var(--muted);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -744,8 +749,8 @@ h3 {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-top: 4px;
|
||||
padding-top: 7px;
|
||||
margin-top: 2px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -1797,13 +1802,14 @@ h3 {
|
||||
.right-sidebar {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
gap: 8px;
|
||||
padding: 10px 10px 10px 16px;
|
||||
grid-template-rows: auto auto auto auto minmax(0, 1fr);
|
||||
align-content: stretch;
|
||||
gap: 6px;
|
||||
padding: 8px 10px 8px 16px;
|
||||
background: rgba(18, 20, 18, 0.98);
|
||||
border-left: 1px solid var(--line);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
@@ -1838,14 +1844,21 @@ h3 {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(24, 27, 24, 0.76);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sidebar-workbench-header .route-path {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-workbench-header h2 {
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.workbench-shell.is-right-sidebar-collapsed .right-sidebar {
|
||||
@@ -2454,8 +2467,8 @@ tbody tr:last-child td {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -2465,7 +2478,9 @@ tbody tr:last-child td {
|
||||
}
|
||||
|
||||
.device-pod-workspace {
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.device-pod-selector-row {
|
||||
@@ -2499,7 +2514,7 @@ tbody tr:last-child td {
|
||||
.device-pod-summary .summary-tile,
|
||||
.device-pod-interfaces .summary-tile {
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.device-pod-summary .kv-list {
|
||||
@@ -2520,7 +2535,7 @@ tbody tr:last-child td {
|
||||
min-width: 0;
|
||||
margin: 2px 0 0;
|
||||
color: var(--text);
|
||||
font: 10px/1.2 var(--mono);
|
||||
font: 9px/1.15 var(--mono);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -2567,11 +2582,12 @@ tbody tr:last-child td {
|
||||
|
||||
.device-event-panel {
|
||||
min-width: 0;
|
||||
min-height: 240px;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(180px, 1fr);
|
||||
grid-template-rows: auto minmax(132px, 1fr);
|
||||
border: 1px solid var(--line);
|
||||
background: #101310;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.event-toolbar {
|
||||
@@ -2580,7 +2596,7 @@ tbody tr:last-child td {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
@@ -2605,10 +2621,10 @@ tbody tr:last-child td {
|
||||
|
||||
.device-event-scroll {
|
||||
min-width: 0;
|
||||
min-height: 132px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 8px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.device-event-scroll pre {
|
||||
|
||||
Reference in New Issue
Block a user