fix(#5545): keep center pane readable in three-panel layout

[rodboev]

Thinking Path

• The desktop shell currently treats the sidebar and workspace panel as fixed rails, leaving the conversation pane to absorb all shrinkage.
• The fix changes the desktop flex contract so the center has a real floor and the side rails can yield before the conversation becomes unreadable.
• Existing compact and mobile panel behavior stays on the same breakpoints, so this remains a layout fix rather than a new navigation mode.

What Changed

• static/style.css: adds a desktop three-panel flex contract that keeps the center pane readable and lets side panels shrink to their existing minimum-width family.
• static/style.css: keeps the closed desktop workspace panel at a zero-width floor so the new open-panel minimum does not reserve invisible space.
• tests/test_issue5545_three_panel_layout.py: adds source-level responsive layout tests for the desktop floor, shrinkable rails, and preserved compact/mobile breakpoints.

Why It Matters

Users who dock or resize the WebUI with all three panels open keep a usable conversation pane instead of losing it between two fixed side rails.

Verification

• python -m pytest tests/test_issue5545_three_panel_layout.py -v --timeout=60
• git diff --check

Full-suite CI context, not run locally unless requested: python -m pytest tests/ -v --timeout=60.

Upstream

Closes #5545.

Model Used

GPT 5.5 via Codex CLI

[greptile-apps]

Greptile Summary

Fixes the three-panel desktop layout so the center conversation pane keeps a 420 px minimum-width floor while the sidebar and workspace panel are allowed to shrink down to their existing 180 px resize handles, rather than crowding the center pane between two fixed-width rails.

• static/style.css: inserts four declarations inside @media(min-width:901px) — a full flex contract on .main, flex-shrink:1;min-width:180px on both side panels, and min-width:0 !important on both closed-state selectors so the new floor doesn't reserve space when a panel is hidden.
• tests/test_issue5545_three_panel_layout.py: adds five source-level pytest tests that parse the CSS and verify the declared contract, the CSS↔JS min-width alignment, and that compact (≤900 px) and mobile (≤640 px) breakpoints remain intact.

Confidence Score: 5/5

Safe to merge — changes are scoped to a single media-query block, touch only flex properties and min-widths, and leave all compact/mobile breakpoints untouched.

The CSS change is small, well-targeted, and internally consistent: the closed-panel rules correctly nullify the new 180 px floor with min-width:0 !important, specificity is handled without conflicts, and the 420+180+180=780 px combined floor sits well inside the 901 px breakpoint trigger. The accompanying tests verify the full declared contract at the source level without a browser dependency.

No files require special attention.

Important Files Changed

Filename	Overview
static/style.css	Adds a desktop three-panel flex contract inside @media(min-width:901px): .main gets a 420 px floor, .sidebar and .rightpanel become shrinkable with a 180 px floor, and both closed-state rules gain min-width:0 !important to prevent the new floor from reserving invisible space.
tests/test_issue5545_three_panel_layout.py	Source-level CSS contract tests: verifies the center-pane floor, shrinkable rail min-widths, JS resize-handle alignment (SIDEBAR_MIN/PANEL_MIN), and that compact/mobile breakpoints are untouched.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    VP["Viewport ≥ 901 px"]
    VP --> FLEX["Flex container .layout"]

    FLEX --> SB[".sidebar\nflex-shrink:1\nmin-width:180px"]
    FLEX --> MN[".main\nflex:1 1 420px\nmin-width:420px"]
    FLEX --> RP[".rightpanel\nflex-shrink:1\nmin-width:180px"]

    SB --> SBC{"sidebar-collapsed?"}
    SBC -- yes --> SB0[".sidebar: width:0 !important\nmin-width:0 (specificity wins)"]
    SBC -- no --> SBF["shrinks to 180 px floor"]

    RP --> RPC{"workspace-panel closed?"}
    RPC -- yes --> RP0[".rightpanel: width:0 !important\nmin-width:0 !important"]
    RPC -- no --> RPF["shrinks to 180 px floor"]

    MN --> MNF["Never below 420 px\n(readable conversation pane)"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    VP["Viewport ≥ 901 px"]
    VP --> FLEX["Flex container .layout"]

    FLEX --> SB[".sidebar\nflex-shrink:1\nmin-width:180px"]
    FLEX --> MN[".main\nflex:1 1 420px\nmin-width:420px"]
    FLEX --> RP[".rightpanel\nflex-shrink:1\nmin-width:180px"]

    SB --> SBC{"sidebar-collapsed?"}
    SBC -- yes --> SB0[".sidebar: width:0 !important\nmin-width:0 (specificity wins)"]
    SBC -- no --> SBF["shrinks to 180 px floor"]

    RP --> RPC{"workspace-panel closed?"}
    RPC -- yes --> RP0[".rightpanel: width:0 !important\nmin-width:0 !important"]
    RPC -- no --> RPF["shrinks to 180 px floor"]

    MN --> MNF["Never below 420 px\n(readable conversation pane)"]

Loading

_{Reviews (3): Last reviewed commit: "test(layout): match resize minima consta..." | Re-trigger Greptile}

[rodboev]

Picked up the follow-up fragility Greptile called out in the refreshed summary. f34fd8ed tightens the tests/test_issue5545_three_panel_layout.py checks so they regex-match the exact SIDEBAR_MIN = 180 and PANEL_MIN = 180 assignments, instead of accepting any longer value that happens to start with 180.

[cutter-sh]

🎬 Cutter preview — PR #5594

three-panel desktop layout — Chat pane keeps a comfortable minimum width between the Chat and Workspace rails.

center pane holds readable floor as side rails shrink — Center chat pane keeps a readable minimum width while the side rails shrink around it.

[nesquena-hermes]

🔬 Gate certification — GREEN (engineering) ✅ · ⏸️ visible three-panel layout → Nathan sign-off

Certified head: sha:c7997f68 (clean rebase, branch gate-rebase/5594-three-panel-center-readable) · PR: #5594 · rodboev, fix(#5545): keep center pane readable in three-panel layout
Verdict: Engineering-clean — gives the center pane a 420px readable floor in the ≥901px three-panel layout while letting the side rails shrink first, correctly scoped (no mobile/narrow overflow) and without blocking the collapsed rightpanel. Codex SAFE, layout tests pass. Visible layout change → Nathan's visual sign-off.

What I ran (rebased worktree /tmp/wt-rebase-5594)

Gate	Result
Rebase onto current master	✅ git apply clean
Codex (reproduce)	SAFE TO SHIP — 0 findings
PR's layout test	✅ 5/5 (test_issue5545_three_panel_layout.py)

Findings

✅ Correct + well-scoped (applied the #5560 media-scope lesson): the new rules live inside @media(min-width:901px) (verified by the enclosing block's closing brace at 2911, not just the nearest @media above) — so .main{flex:1 1 420px; min-width:420px} (center readable floor) + .sidebar/.rightpanel{flex-shrink:1; min-width:180px} (rails shrink first to protect the center) apply ONLY at desktop three-panel widths, NOT mobile/narrow (<901px) — so no 420+180+180 horizontal overflow below 901px; at 901-1200px the 780px min fits. Crucially it adds min-width:0 !important to the COLLAPSED rightpanel selectors so the new min-width:180px can't block a full collapse to 0. Codex confirmed no regression to two-panel / workspace-open / workspace-closed states, no conflict with existing flex rules, collapsed rightpanel still fully collapses. 5 layout tests pass.

Recommendation to the next agent

Engineering-GREEN — merge from branch gate-rebase/5594-three-panel-center-readable (sha:c7997f68), NOT the PR's stale head f34fd8ed — but PARK for Nathan's visual sign-off (three-panel layout at 901 / 1200 / 1440 wide, + verify the rightpanel still fully collapses). The CSS is correctly scoped (≥901px only, no narrow-viewport overflow) and Codex SAFE; the open item is Nathan's visual confirmation that the center-readable floor + rail-shrink behavior looks right across desktop widths (his visual-superiority-at-every-resolution bar). concept 4/5 (real #5545 readability fix). Author @rodboev (T1). crit=3.

---

Gate-certifier layer (warm-up → gate → release). I do not merge/tag/deploy. Rebased onto current master; verified scope by closing brace (inside @media(min-width:901px), closes 2911 → desktop-only, no <901px overflow), collapsed rightpanel min-width:0 !important preserves full collapse, rails shrink before center, Codex SAFE + 5/5 layout tests. Visible layout → Nathan. Cert valid for sha:c7997f68.

[nesquena-hermes]

Shipped in v0.51.899. Thanks @rodboev — the three-panel desktop layout now keeps the conversation readable on resize: the center gets a floor and the side rails yield first (≥901px; rightpanel still fully collapses when closed). The 910px before/after showed the center going from crushed-unreadable to comfortable. Closes #5545.