From 81d7242a69fb49592f378be07cc9e4c076e69102 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 28 May 2026 09:16:13 +0800
Subject: [PATCH] fix: compact device pod sidebar

---
 web/hwlab-cloud-web/scripts/check.mjs |  6 +++
 web/hwlab-cloud-web/styles.css        | 69 +++++++++++++++++++++------
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/web/hwlab-cloud-web/scripts/check.mjs b/web/hwlab-cloud-web/scripts/check.mjs
index 09a4b35f..7b2ede7e 100644
--- a/web/hwlab-cloud-web/scripts/check.mjs
+++ b/web/hwlab-cloud-web/scripts/check.mjs
@@ -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",
diff --git a/web/hwlab-cloud-web/styles.css b/web/hwlab-cloud-web/styles.css
index ea146876..c28b8d25 100644
--- a/web/hwlab-cloud-web/styles.css
+++ b/web/hwlab-cloud-web/styles.css
@@ -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 {