Make changed-files header sticky in chat timeline

[juliusmarminge]

Summary

• Make the changed-files section header stick to the top while scrolling inside the message timeline.
• Add visual separation for the sticky header with a border, background, blur, and shadow so it remains readable over content.

Testing

• Not run (change is a small UI-only adjustment).
• Not run: bun fmt
• Not run: bun lint
• Not run: bun typecheck

Note

Make changed-files header sticky in chat timeline

• The AssistantChangedFilesSectionInner header now uses position: sticky with a top-2 offset and z-10, keeping it visible while scrolling through long file lists. A ::before pseudo-element fills the gap above the sticky boundary with the background color to avoid visual artifacts.
• The timeline row container in MessagesTimeline.tsx switches from overflow-x-hidden to overflow-x-clip to allow sticky positioning to work correctly within the row.

^{Macroscope summarized 0923bf9.}

---

Note

Low Risk
Low risk UI-only CSS changes; main risk is unintended layout/scroll behavior regressions around sticky positioning and overflow clipping.

Overview
Improves readability of the chat timeline’s Changed files section by making its header sticky while scrolling, with a background layer to prevent content bleed-through.

Adjusts the timeline row wrapper from overflow-x-hidden to overflow-x-clip to avoid breaking sticky positioning.

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 02fc10df-c519-47fe-a68f-9e645c52013e

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch t3code/41a7fbc7

---

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

[macroscopeapp]

Approvability

Verdict: Approved

Pure CSS changes making the changed-files header sticky in the chat timeline. No logic or runtime behavior changes - only presentational styling adjustments.

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

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sticky positioning broken by ancestor overflow-x-hidden
  • Replaced overflow-x-hidden with overflow-x-clip on the renderItem wrapper so it no longer creates a scroll container, allowing position:sticky to work correctly on the changed-files header.

Or push these changes by commenting:

@cursor push a6498ef17e

Preview (a6498ef17e)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -234,7 +234,7 @@
   // from TimelineRowCtx, which propagates through LegendList's memo.
   const renderItem = useCallback(
     ({ item }: { item: MessagesTimelineRow }) => (
-      <div className="mx-auto w-full min-w-0 max-w-3xl overflow-x-hidden" data-timeline-root="true">
+      <div className="mx-auto w-full min-w-0 max-w-3xl overflow-x-clip" data-timeline-root="true">
         <TimelineRowContent row={item} />
       </div>
     ),

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 7372c92. Configure here.}

Dismissing prior approval to re-evaluate 8986f5b