emrg: fix v0.2.82 GUI layout — add missing .react-shell-body/.result-panel rules to shell.css - #1040
Conversation
…panel rules to shell.css 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.
argszero
left a comment
There was a problem hiding this comment.
✅ LGTM — cycle 134000. Re-verified the diff: +40 lines in src/shell.css adding .react-shell-body (flex row), .react-shell-sidebar (264px column flex), .result-panel (280px right sidebar), .result-panel.collapsed (40px) and .result-panel.dragging. Root cause confirmed — React uses class selectors while vanilla layout.css only styles the #app/#sidebar/#result-panel IDs. Local: vitest 445/445 + tsc clean + npm run build compiles the new rules into dist CSS (verified in built stylesheet) + GUI npm 92 green. CI 33043357484 green (test + test-windows), MERGEABLE/CLEAN.
argszero
left a comment
There was a problem hiding this comment.
✅ LGTM — cycle 135125. Re-verified the diff on head 0e577d2 (unchanged): +40 lines in src/shell.css adding the missing three-column layout — .react-shell-body (flex row), .react-shell-sidebar (264px column flex), .result-panel (280px right sidebar), .result-panel.collapsed (40px), .result-panel.dragging. Confirmed the DOM nesting in components/Shell.tsx (.react-shell-body > .react-shell-sidebar + .react-shell-main) and that master lacks these class rules, so this is the correct fix. Wrote this cycle's verification on the feature branch: vitest 445/445, tsc --noEmit clean, npm run build compiles all 6 new selector rules into dist CSS (48.85 kB). CI 33043357484 green (test + test-windows), MERGEABLE/CLEAN.
argszero
left a comment
There was a problem hiding this comment.
✅ LGTM — cycle 135750. Re-verified head 0e577d2 (unchanged) and the +40-line diff in src/shell.css: adds .react-shell-body (flex row), .react-shell-sidebar (264px column flex), .result-panel (280px right sidebar), .result-panel.collapsed (40px), .result-panel.dragging. Confirmed master lacks these class rules (root cause: React class selectors vs vanilla ID-only layout.css) and components/Shell.tsx nests .react-shell-sidebar + .react-shell-main inside .react-shell-body. CI 33043357484 green (test + test-windows), MERGEABLE/CLEAN. 3 consecutive ✅ from distinct cycles (134000 → 135125 → 135750, no ❌).
Uh oh!
There was an error while loading. Please reload this page.
…t, add missing .react-shell-body/.result-panel layout rules to shell.css) (#1041) Co-authored-by: EMRG Evolution <emrg@argszero.dev>
… (compositing layer) (#1061) Rant 2026-08-28T13:31:55: on 0.2.85 + Electron 31.7.7 (Chromium 126) + macOS 26.5.2, the left open-sessions .conv-item rows intermittently flicker/shake on hover. Logic layer ruled out; the structural difference vs vanilla is .react-shell-sidebar carrying overflow-y:auto (added in #1040) — making the sidebar a scroll container in which the background-color 150ms hover transition triggers main-thread repaint flicker on this Electron/macOS combo. - components.css .conv-item: persistent compositing layer promotion (transform: translateZ(0) + will-change: background-color) — the hover background transition now runs on the GPU layer instead of repainting the scroll container on the main thread. Layer exists before hover, so no mid-transition promotion. - shell.css .react-shell-sidebar: drop the redundant overflow-y:auto (vanilla #sidebar has none — scrolling belongs to the list itself). Add .react-shell-sidebar .react-sidebar { display:flex; flex-direction:column; flex:1; min-height:0 } so #open-sessions' max-height:40% + overflow-y:auto resolves against a definite height and the list keeps scrolling. Sidebar is no longer a scroll container, removing the flicker trigger environment entirely. Verified: renderer Sidebar/Shell tests 43/43, tsc clean, GUI node tests 87 pass/8 skip (theme-guard included). Co-authored-by: EMRG Evolution <emrg@argszero.dev>
Fixes the v0.2.82 GUI layout regression (rant 2026-08-27T13:16:33).
Root cause: 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 (sidebar pushed to top, main full-width, composer hovering mid, result panel pushed below composer) instead of laying out horizontally.Fix: Add the equivalent layout rules to
src/shell.css, mirroring the vanilla layout.css values:.react-shell-body: display flex row, flex:1, min-height:0, overflow:hidden (horizontal three-column container).react-shell-sidebar: width 264px / min-width 220px, column flex, border-right.result-panel: width 280px / min-width 240px, right sidebar, column flex, border-left.result-panel.collapsed: width/min-width 40px (matches ResultPanel's inline collapsed width and the vanilla 40px narrow-strip behavior).result-panel.dragging: suppress width transition during resizeNo change to Shell.tsx / ResultPanel.tsx — the class names were already correct; only the CSS rules were missing.
Verification: