fix(web): prevent changed files header overlap

[t3-code]

summary

• keep the changed-files summary and diff controls from shrinking when side panels narrow the chat pane
• clip only the optional helper label instead of letting header content overlap
• add regression coverage for the responsive flex constraints

screenshots

captured from the real dev app with the diff panel open and the same narrow 264px changed-files card.

before, light mode

stats collide with the full Open diff action.

after, light mode

stats remain readable while the diff action collapses to its icon.

before, dark mode

stats collide with the full Open diff action.

after, dark mode

stats remain readable while the diff action collapses to its icon.

test plan

• vp test run apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/components/chat/ChangedFilesTree.test.tsx (23 passed)
• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/chat/ChangedFilesTree.tsx apps/web/src/components/chat/ChangedFilesTree.test.tsx
• vp fmt --check apps/web/src/components/chat/ChangedFilesTree.tsx apps/web/src/components/chat/ChangedFilesTree.test.tsx
• vp run --filter @t3tools/web build
• vp test run apps/web/src (2194 passed; pre-existing/unrelated runtimeAbi.test.ts collection failure on ghostty-vt.wasm?inline)

request provenance

• requested by: @StiensWout

---

Note

Low Risk
UI-only Tailwind layout tweak in the chat changed-files header, with no auth, data, or behavioral logic changes.

Overview
Prevents the changed-files header from overlapping when the chat pane is narrow by tightening flex constraints and switching helper-label visibility to a container query.

ChangedFilesCard is now an @container/changed-files. The file-count summary and action controls stay shrink-0, while only the optional “Show/Hide files” and “Open diff” labels truncate or hide below @[24rem]. Regression coverage asserts the new flex and container-query classes.

^{Reviewed by Cursor Bugbot for commit 8723858. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix ChangedFilesCard header overlap using container queries

Replaces sm: viewport breakpoints with @[24rem]/changed-files container queries in the ChangedFilesCard header so secondary text and the 'Open diff' label appear based on the card's own width rather than the viewport. Also adds overflow-hidden to the header button, shrink-0 to the primary label and actions container, and min-w-0 flex-1 truncate to the secondary label to prevent overlap in tight layouts.

^{Macroscope summarized 8723858.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	11.3 KiB	−4 B (−0.0%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	5.5 KiB	+7 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−11 B (−0.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	49.7 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	11.3 KiB	11.3 KiB	−13 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	−3 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−10 B (−0.2%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	50.6 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 849bac8 · PR result: 8723858 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 94.6 KiB
• Claude decoded thread snapshot: 95.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved 8723858

This PR contains only CSS class changes to fix visual overlap in the changed files header. The modifications are purely styling adjustments (overflow handling, flex properties, container queries) with no runtime logic changes.

^{You can customize Macroscope's approvability policy. Learn more.}