feat(desktop): side panel tabs keep to a centred reading column, except the Board

Merged
DA
8d ago
+44-0

Summary

Dean: "Let's add a max width to tab content (except for the Board) just like how the plan content has a max width."

Every side panel tab except the Board now keeps its content to a centred column, the way the plan document keeps to --reading-width. This matters when the panel is wide or full screen (#1841, #1923). The change is CSS only (styles/desktop.css).

  • Text tabs use the plan's --reading-width (720px): Transcript, Work, coding agent and subagent tabs (the transcript, the Task/Plan card, and the composer), and History.
  • Code tabs use a new --code-reading-width (840px), defined beside --reading-width, so 100 columns of code fit beside the line numbers without wrapping. This covers the Code feed and File tabs.
  • How it works. Each scroller still spans the whole panel, so its scrollbar stays at the panel's edge. It pads in to the column: max(<the tab's own inset>, (100% āˆ’ measure) / 2). A narrow panel looks exactly as before.
  • Agent tabs. The composer pads in to the same column as the transcript, so the card, the context ring, and the model chip line up with it. Sticky call headers (#1909) and the scroll-to-bottom button (#2002) already sit in the log's column, so they stay aligned.
  • What stays full width: the tab strip, the panel's own chrome, and the File tab's heading band. The heading's path starts at the column's edge.
  • Unchanged: the empty states were already capped and centred. The Board stays edge to edge. No behaviour changes.

No test is added. The change is layout only, and a test that asserts these CSS rules would be a change detector, which the task rules out.

Evidence

  • ./scripts/check.sh exits 0 on Linux.
  • macOS Electron verification (./scripts/verify.sh) was not run. This is a Linux cloud VM, and CI could not verify the Mac UI: no macOS job runs on a PR. LUKE-159 is the manual Mac pass.

Visual evidence

Rendered in headless Chrome from the real components (PlanTranscript, PlanWork, CodePane, AgentTabView, HistoryTab, FileTab) inside the full-screen side panel's markup, with the built styles.css, at 1440Ɨ900 @2x. This is not the packaged Mac app. Each tab has before (dark) and after (dark and light); the remaining before-light shots are in pr-assets/pr-2032/. The Board is unchanged and was not rendered, because it loads the Excalidraw bundle at runtime.

Transcript

Before (dark)After (dark)After (light)

Work

Before (dark)After (dark)After (light)

Code feed (840px)

Before (dark)After (dark)After (light)

Coding agent tab (transcript, plan card, composer)

Before (dark)After (dark)After (light)

History

Before (dark)After (dark)After (light)

File tab (840px; heading band stays full width)

Before (dark)After (dark)After (light)

Invariants

  • ./scripts/check.sh green. verify.sh not run.
  • CSS only: no wire, schema, golden, or dependency change.
  • CLAUDE.md/AGENTS.md untouched.

šŸ¤– Generated with Claude Code