mirrors/pikasTech-HWLAB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact device pod sidebar

Browse Source
This commit is contained in:
Codex
2026-05-28 09:16:13 +08:00
parent ab93b97547
commit 81d7242a69
2 changed files with 60 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/hwlab-cloud-web/scripts/check.mjs
+6
View File
@@ -79,6 +79,12 @@ for (const selector of [
assertIncludes(styles, selector, `missing Device Pod style ${selector}`);
}
assert.match(styles, /\.device-event-scroll\s*\{[\s\S]*?overscroll-behavior:\s*contain;/u, "event stream scroll must be contained");
assert.match(styles, /\.right-sidebar\s*\{[^}]*grid-template-rows:\s*auto minmax\(0, 1fr\);[^}]*overflow-x:\s*hidden;[^}]*overflow-y:\s*auto;[^}]*scrollbar-gutter:\s*stable;[^}]*\}/u, "right sidebar must be vertically scrollable and leave remaining space to the event stream");
assert.match(styles, /\.device-pod-status\s*\{[^}]*grid-template-rows:\s*auto auto auto;[^}]*align-content:\s*start;[^}]*\}/u, "Device Pod summary section must stay content-sized");
assert.match(styles, /\.device-pod-workspace\s*\{[^}]*grid-template-rows:\s*auto minmax\(180px, 1fr\) auto;[^}]*\}/u, "Device Pod workspace must reserve vertical space for the event stream");
assert.match(styles, /\.device-pod-summary \.kv-list\s*\{[^}]*grid-template-columns:\s*repeat\(2, minmax\(0, 1fr\)\);[^}]*\}/u, "Pod Summary key/value rows must use a compact two-column layout");
assert.match(styles, /\.device-event-panel\s*\{[^}]*min-height:\s*180px;[^}]*\}/u, "event panel must keep a usable minimum height");
assert.match(styles, /\.device-event-scroll\s*\{[^}]*min-height:\s*132px;[^}]*overflow:\s*auto;[^}]*\}/u, "event stream must keep a usable scroll viewport");
for (const fn of [
"initDevicePodPanel",
web/hwlab-cloud-web/styles.css
+54 -15
View File
@@ -1571,12 +1571,15 @@ h3 {
.right-sidebar {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) minmax(0, 0.9fr);
gap: 10px;
grid-template-rows: auto minmax(0, 1fr);
gap: 8px;
padding: 10px 10px 10px 16px;
background: rgba(18, 20, 18, 0.98);
border-left: 1px solid var(--line);
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
@@ -2131,7 +2134,7 @@ tbody tr:last-child td {
}
.right-sidebar {
grid-template-rows: minmax(168px, 1.18fr) minmax(0, 0.82fr);
grid-template-rows: auto minmax(0, 1fr);
}
.command-button {
@@ -2145,17 +2148,18 @@ tbody tr:last-child td {
min-width: 0;
min-height: 0;
display: grid;
gap: 10px;
padding: 12px;
overflow: hidden;
gap: 8px;
padding: 10px;
overflow: visible;
}
.device-pod-status {
grid-template-rows: auto auto minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: start;
}
.device-pod-workspace {
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-rows: auto minmax(180px, 1fr) auto;
}
.device-pod-selector-row {
@@ -2183,7 +2187,41 @@ tbody tr:last-child td {
.device-pod-interfaces {
min-width: 0;
display: grid;
gap: 8px;
gap: 6px;
}
.device-pod-summary .summary-tile,
.device-pod-interfaces .summary-tile {
gap: 4px;
padding: 8px;
}
.device-pod-summary .kv-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 8px;
}
.device-pod-summary .kv-list > div {
min-width: 0;
}
.device-pod-summary dt {
color: var(--muted);
font: 760 9px/1.1 var(--mono);
}
.device-pod-summary dd {
min-width: 0;
margin: 2px 0 0;
color: var(--text);
font: 10px/1.2 var(--mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-pod-interfaces {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.summary-tile {
@@ -2210,19 +2248,20 @@ tbody tr:last-child td {
.summary-value {
color: var(--text);
font-size: 13px;
font-size: 12px;
font-weight: 800;
}
.summary-detail {
color: var(--muted);
font-size: 11px;
font-size: 10px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.device-event-panel {
min-width: 0;
min-height: 0;
min-height: 180px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border: 1px solid var(--line);
@@ -2260,10 +2299,10 @@ tbody tr:last-child td {
.device-event-scroll {
min-width: 0;
min-height: 0;
min-height: 132px;
overflow: auto;
overscroll-behavior: contain;
padding: 9px;
padding: 8px;
}
.device-event-scroll pre {