fix(web): keep messages from showing through the composer footer#30064

Approvability

Verdict: Approved at 9cab670

Macroscope's review found this PR approvable — Adds a theme-aware fade behind the composer so scrolling messages no longer show through its footer. The change is limited to presentation, leaving composer interactions and product defaults unchanged.

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

Explain Change →

No actionable comments were generated in the recent review.

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

External image Recent review info

External image Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: b3fdf2b
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 0d5df923-7595-4987-8ad4-84e392744939

External image Commits

Reviewing files that changed from the base of the PR and between 1df6a36a4ac5ae08201e1aa93a807aa5ebc15990 and bdba8b7acf392a3bbedd198d8f4e2d3c5d784a5e.

External image Files selected for processing: 1

• apps/web/src/components/ChatView.tsx

External image Files skipped from review as they are similar to previous changes: 1

• apps/web/src/components/ChatView.tsx

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

Verified in a real dev environment

Verified unchanged head 9cab670a6b6fabea94bbad4f8e40a43d3b50bb7c in Linux Chrome, driven with Playwright from the repository dependencies.

• Started github/main (cefb544af3c9) in a separate worktree after vp i. Created a project pointing at a real git repository through the app, selected Codex gpt-6.1-sol, and submitted a real turn requesting 40 markdown bullets. Enabled the persistent composer context row in Appearance settings. Main reproduced message text overlapping the workspace row and bottom gap.
• Stopped main's dev server before starting this exact PR head after vp i. Preserved the app-created conversation in isolated dev state. At the same 1280×900 viewport and scrollTop 972, the footer stays clear. The overlay becomes opaque halfway down.
• Clicked Scroll to end: the final bullet ends at y=664 and the overlay starts at y=728.5, leaving 64.5px clearance. Scrolling both directions still works.
• Checked light appearance and a 390×844 narrow web viewport. Opened the footer branch picker, entered and cleared a draft, and inspected the unchanged centered new-thread composer.
• Submitted a follow-up through the PR's web composer using real Codex gpt-6.1-sol; its completed reply appeared in the conversation.
• vp run check:changed cefb544af3c98224874419198c0359b652ca3c94 passed through blacksmith-check: format, lint, knip, affected typechecks, 49 tests in three files, and React Compiler coverage. The worker needed its shallow history deepened and Chromium installed before the successful run. Existing CI also reports 30 successful checks.

Main, before:

main: message bullets overlap the composer footer

PR, same conversation and scroll position:

pr: composer footer stays clear

Scroll to end, with the last bullet fully above the composer:

pr: final bullet has 64.5px clearance above the composer overlay

Light appearance:

pr: footer stays clear in light mode

Narrow web layout:

pr: clear footer at 390px width

Scrolling, scroll-to-end, footer branch picker, and draft entry. The animation below uses the inspected 12.5-second recording. The uploaded MP4 was also checked for playback and seeking:

pr: scrolling and composer controls in the real web client

Not verified

Native Electron on macOS or Windows, native iOS/Android, remote relay/tunnel connections, and providers other than Codex were not exercised. The 390px capture is the web client, not a native mobile client.

No source changes were needed.

Merged current main

Merged github/main (ef81fd15ca) at 87aa560eb9 with a merge commit. The one conflict was the composer overlay class in ChatView.tsx: kept main's [@media(max-height:34rem)]:items-end on the draft branch and this PR's fade on the active-thread branch. vp run check:changed passed through blacksmith-check (format, lint, knip, typecheck, 49 tests, React Compiler), and all CI checks are green on the new head. The captures above predate the merge and were not retaken.

Evidence

Real web app, Chromium, 1280×800 CSS pixels, light theme, fresh synthetic git project on each commit. Enable persistent composer context, open a completed replay response ending in file-path bullets, scroll text behind the footer, then click Scroll to end.

Base shows file-list text through the workspace row and bottom gap. Head covers both areas. The final bullet remains fully readable after Scroll to end on both commits.

Reproduction instructions · Synthetic seed script · Browser driver

AI-assisted; verified with the tests and tools listed above.

Not shown:

• Remote workspace connection was not exercised; the reproduction used a local synthetic git workspace.
• Desktop shell, mobile clients, dark theme, and scrollbar dragging were not exercised.