Skip to content

fix(commits): scroll changed-files list in graph commit detail (DAN-79) - #137

Merged
danielss-dev merged 1 commit into
mainfrom
developements/graph-commit-files-scroll-5c0e
Sep 24, 2026
Merged

danielss-dev merged 1 commit into
mainfrom
developements/graph-commit-files-scroll-5c0e

Conversation

@danielss-dev

@danielss-dev danielss-dev commented Sep 24, 2026 •

Copy link
Copy Markdown
Owner

Linear

DAN-79 — All Commits graph commit detail: changed-files list cannot scroll.

Problem

The right-hand commit detail panel lists changed files in the upper vertical split (.cd-files inside a react-resizable-panels Panel). That host was flex-shrink: 0 with no height fill and no overflow-y, so a commit that touched more files than fit clipped instead of scrolling. Files below the visible rows were unreachable; the header and diff stayed on screen.

This is the same react-resizable-panels trap in docs/learnings.md: Panel children are display: block, so they need height: 100% (not leftover flex shrink) plus min-height: 0 and overflow-y: auto.

Fix

Smallest CSS/layout change; no second file-list UI.

  • .cd-files: height: 100%, min-height: 0, overflow-y: auto; drop flex-shrink: 0
  • .cd-diff / .cd-diff-scroll: fill the lower panel with the same scroll-host pattern as Local Changes (.lc-diff-scroll) so the diff still scrolls independently
  • PanelResizeHandle class rs-handle horiz so the row-resize hit area matches other vertical splits

File-row selection, active styling, header actions, empty/loading states, and Pierre text/image diffs are unchanged.

Tests

No existing suite covers commit-detail chrome, so this PR does not add a layout CSS test. Manual check:

  1. Open All Commits, select a commit with more changed files than fit in the upper pane (or shrink that pane via the resize handle).
  2. Scroll the file list; every path can be focused.
  3. Click a scrolled-into-view file; the diff below updates.
  4. Scroll the diff pane; drag the vertical split; Checkout / Cherry-pick / Revert / stash actions and empty/loading states still work.

Proof

  • pnpm --filter ./ui exec tsc --noEmit — pass
  • pnpm --filter ./ui test — 99 files / 568 tests pass
  • Demo harness (?view=commits, padded to 49 paths so the list exceeds the upper pane): .cd-files is overflow-y: auto, clientHeight 190 vs scrollHeight 1290, scrollTop 1100 after jumping to the last path. Clicking that path sets .cd-file.active and swaps the diff. Dragging .rs-handle.horiz (9px) grew the file pane 190 → 270px; the list stayed scrollable. Header still showed Checkout / Cherry-pick / Revert.

The Linear issue already has the before screenshot (list squeezed, later paths unreachable). After:

Top of the overflowing list (header + split + diff still present):

Commit detail: changed-files list fills the upper pane and overflows

Scrolled to the last path; selecting it updates the diff:

Commit detail: scrolled file list with last path selected

Selecting the original file again restores the text diff:

Commit detail: reselecting the first file restores the Pierre diff

Media is not committed on the branch.

Out of scope

Virtualizing huge file lists, redesigning commit-detail IA, pending/local Changes file lists.

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

Make .cd-files fill the upper react-resizable-panels slot (height 100%,
min-height 0, overflow-y auto) so a multi-file commit can scroll every
path without clipping. Mirror the same fill on .cd-diff / .cd-diff-scroll
and mark the split handle as horiz so the row-resize hit area matches
other vertical splits.

Co-authored-by: Daniels <danielss-dev@users.noreply.github.com>
@danielss-dev
danielss-dev marked this pull request as ready for review September 24, 2026 13:10
@danielss-dev
danielss-dev merged commit f5ed9a8 into main Sep 24, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants