From 0e577d25d670428c176a2ae3297b22baf601e824 Mon Sep 17 00:00:00 2001
From: EMRG Evolution <emrg@argszero.dev>
Date: Thu, 27 Aug 2026 13:42:12 +0800
Subject: [PATCH] =?UTF-8?q?emrg:=20fix=20v0.2.82=20GUI=20layout=20?=
 =?UTF-8?q?=E2=80=94=20add=20missing=20.react-shell-body/.result-panel=20r?=
 =?UTF-8?q?ules=20to=20shell.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The React migration (Batch 5) uses class selectors (react-shell-body /
react-shell-sidebar / result-panel) instead of the vanilla ID selectors
(#app / #sidebar / #result-panel) that layout.css styles. Because the
React classes had no layout rules in shell.css, the three columns stacked
vertically instead of laying out horizontally (sidebar-top, main full-width,
composer mid, result panel pushed below composer).

Add the equivalent layout rules to shell.css (mirroring vanilla values):
- .react-shell-body: flex row, flex:1, min-height:0, overflow:hidden
- .react-shell-sidebar: width 264px / min-width 220px, column flex
- .result-panel: width 280px / min-width 240px, right sidebar, column flex
- .result-panel.collapsed: width/min-width 40px (matches ResultPanel inline)
- .result-panel.dragging: suppress width transition during resize

No change to Shell.tsx / ResultPanel.tsx (class names already correct; only
the CSS rules were missing). Verified: vitest 445/445, tsc typecheck clean,
npm run build compiles the new rules into dist CSS, GUI npm test 92 green.
---
 emrg/gui/renderer/src/shell.css | 40 +++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/emrg/gui/renderer/src/shell.css b/emrg/gui/renderer/src/shell.css
index 39797d0e..89916f3a 100644
--- a/emrg/gui/renderer/src/shell.css
+++ b/emrg/gui/renderer/src/shell.css
@@ -39,6 +39,46 @@
   padding: 0;
 }
 
+/* ── 横向三栏主容器（对齐 vanilla layout.css #app 的 flex 横向 + 侧/主/结果三栏） ──
+   Batch 5 用类名 react-shell-* 而非 vanilla ID（#app/#sidebar/#result-panel），
+   layout.css 的 ID 选择器对类名不生效，故在此补齐等价布局（rant 2026-08-27T13:16:33）。 */
+.react-shell-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.react-shell-sidebar {
+  width: 264px;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+
+/* 结果面板右栏（对齐 vanilla #result-panel 280px；ResultPanel.tsx 已是 className=result-panel） */
+.result-panel {
+  width: 280px;
+  min-width: 240px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  background: var(--bg-panel);
+  overflow: hidden;
+  transition: width 0.2s cubic-bezier(.2,.8,.3,1), min-width 0.2s cubic-bezier(.2,.8,.3,1);
+}
+.result-panel.collapsed {
+  width: 40px;
+  min-width: 40px;
+  border-left: 1px solid var(--border);
+}
+.result-panel.dragging {
+  transition: none;
+}
+
 /* Batch 5 slice 3：聊天回路布局（transcript 滚动区 + composer 贴底） */
 .react-shell-main .transcript-view {
   flex: 1;