feat(web): add thread width and fit tables controls

[rohan-patnaik]

Messages and the composer stay capped at 48rem on wide screens, while long table cells can require horizontal scrolling. This adds a theme-aware Width popover in the thread header: 0–100% in 5% steps, with a persistent Fit tables toggle alongside it.

0% preserves the original width; 100% uses the available chat pane. Nested composer surfaces inherit the outer width without applying the expansion again. Fit tables is opt-in (off by default), wraps cells when enabled, and retains a readable minimum per column with horizontal overflow for larger tables. Turning it off restores the existing table expansion state.

Closes #12784.

Related: Discussion #10925, #11594. This proposes a header control with finer adjustment and table fitting as an alternative to Comfortable/Wide/Full in Settings.

Before	After: 100% + Fit tables

Control, intermediate width, and right-panel screenshots

Validation: 65 focused width/preference and Markdown tests passed; web typecheck passed; scoped lint completed with existing warnings. Cua Driver verified every 5% increment, the midpoint, reload persistence for both preferences, restoration of collapsed table state after toggling Fit tables, and reflow with the right panel open. Screenshots use synthetic content in an isolated dev app.

Applies to web and the shared desktop UI. Preferences are device/browser-local, including remote connections; no provider or wire-contract changes. Native mobile is unchanged. Desktop shell and native mobile were not separately exercised.

Implemented with GPT-6 Astra (medium), Codex harness in T3 Code.

Summary by CodeRabbit

• New Features

  • Added a thread width control in the chat header, allowing conversation and composer width adjustments in 5% increments.
  • Added a Fit tables option that wraps table content to the available width while preserving horizontal scrolling for wide tables.
  • Width and table preferences persist across reloads and adapt to available screen space.
  • Chat content, composer, and timeline areas now respond to the selected thread width.

• Documentation

  • Added guidance for using the Thread width and Fit tables controls.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces persistent thread-width and table-fitting controls that affect the header, message layout, composer, and Markdown table rendering across the web client. Fit tables is enabled by default, changing existing table behavior for users without a saved preference, so the scope and default change merit human review.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: c3650cef-c815-4c28-afea-d5a1cfd1f922

📥 Commits

Reviewing files that changed from the base of the PR and between 2d83bec and d1f2269.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 27f53b38-50f2-4e6e-8441-5b16d7f3d973

📥 Commits

Reviewing files that changed from the base of the PR and between 78ef249 and 2d83bec.

📒 Files selected for processing (4)

• apps/web/src/components/chat/ThreadWidthControl.tsx
• apps/web/src/hooks/useThreadWidth.test.tsx
• apps/web/src/hooks/useThreadWidth.ts
• docs/user/composer.md

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/chat/ThreadWidthControl.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

The chat header now exposes persisted thread-width and Fit tables controls. Width state updates the chat content and composer through a CSS variable. Markdown tables use fit-mode sizing and wrapping when enabled.

Changes

Thread width and table fitting

Layer / File(s)	Summary
Preference hooks and validation apps/web/src/hooks/useThreadWidth.ts, apps/web/src/hooks/useThreadWidth.test.tsx	Adds normalized, persisted thread-width state and persisted Fit tables state. Tests cover synchronization, storage events, remounts, invalid values, bounds, and 5% increments.
Header control and thread sizing apps/web/src/components/chat/ThreadWidthControl.tsx, apps/web/src/components/chat/ChatHeader.tsx, apps/web/src/components/ChatView.tsx	Adds the width popover and Fit tables switch. The selected width updates the chat column and composer stack.
Content width propagation apps/web/src/components/chat/ChatComposer.tsx, apps/web/src/components/chat/ComposerSurface.tsx, apps/web/src/components/chat/MessagesTimeline.tsx, apps/web/src/components/ChatView.tsx	Replaces fixed 48rem width constraints with --thread-content-max-width and expands the compaction separator to the available timeline width.
Fit tables rendering and styling apps/web/src/components/ChatMarkdown.tsx, apps/web/src/index.css, docs/user/composer.md	Adds fit-mode table sizing, wrapping, and column counting. The documentation describes the width and Fit tables controls.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature · Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ThreadWidthControl
  participant useThreadWidth
  participant ChatView
  participant MarkdownTable
  User->>ThreadWidthControl: adjust width or Fit tables
  ThreadWidthControl->>useThreadWidth: persist preference
  ChatView->>useThreadWidth: read thread width
  ChatView->>ChatView: apply content width
  MarkdownTable->>useThreadWidth: read Fit tables
  MarkdownTable->>MarkdownTable: apply table sizing and toggle behavior

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 61.54% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 13 functions across 9 files. (1 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The pull request meets the coding requirements in [#12784]. ThreadWidthControl provides a header popover with 0–100% width values in 5% steps and the Fit tables toggle. threadWidthStyle keeps th…
Out of Scope Changes check	✅ Passed	The changes stay within [#12784]. The header control, hooks, layout wiring, table styling, regression tests, and composer documentation directly implement or support the requested width and Fit tables…
Title check	✅ Passed	The title clearly and concisely identifies the two main changes: thread width and Fit tables controls.
Description check	✅ Passed	The description clearly explains the changes, rationale, UI behavior, validation, scope, and includes before/after screenshots. It does not use the template headings or include the checklist, but the …

Full details: Docstring Coverage

Explanation

Docstring coverage is 61.54% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 13 functions across 9 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

_{Comment @coderabbitai help to get the list of available commands.}

[rohan-patnaik]

Addressed the default-behavior concern in 2d83bec: Fit tables is now opt-in, with existing saved choices preserved. Added regression coverage and docs for the new helpers; 65 focused tests, web typecheck, and scoped lint pass. Width and Fit tables remain together. The blanket docstring-coverage warning is advisory; I kept comments focused on the new behavior rather than documenting unrelated existing components.

[v1b3coder]

Supporting the need, and a Width control in the thread header is a nicer home for this than a settings row — 5% steps plus Fit tables is more useful than three presets.

Same gap as #11594: TIMELINE_CONTENT_MAX_WIDTH = 768 in MessagesTimeline.logic.ts still drives the minimap gutter math (resolveTimelineMinimapHasPersistentGutter, resolveTimelineMinimapHitStripWidth). At 100% the helper keeps computing the gutter for a 768px centered column (~896px at a 2560px viewport) and returns the full 40px hover strip while the real gutter is 0, so the strip sits on top of the first message pixels and swallows pointer events — the failure the comment above resolveTimelineMinimapHitStripWidth warns about. Worth feeding the effective width from threadWidthStyle into those helpers (or measuring the lane) here.