Skip to content

fix: prevent filepath wrapping in diff panel#1680

Open
reverb256 wants to merge 3 commits intoPostHog:mainfrom
reverb256:fix/1600-filepath-wrapping
Open

fix: prevent filepath wrapping in diff panel#1680
reverb256 wants to merge 3 commits intoPostHog:mainfrom
reverb256:fix/1600-filepath-wrapping

Conversation

@reverb256
Copy link
Copy Markdown
Contributor

Problem

Long filepaths in the diff review panel wrap between the gray directory path and bold filename, breaking visual alignment.

Closes #1600

Fix

Wrap both path segments in a single container with nowrap + ellipsis truncation:

  • whiteSpace: nowrap keeps dir + filename on one line
  • overflow: hidden + text-overflow: ellipsis truncates long paths
  • title attribute shows full path on hover

Tests

4 new tests in ReviewShell.test.tsx verifying filepath rendering and nowrap behavior.

Wrap the directory path and bold filename spans in a single container
with overflow:hidden, text-overflow:ellipsis, and whiteSpace:nowrap to
prevent the browser from wrapping between the two spans on long paths.

Adds a title attribute so users can hover to see the full path when
truncated.

Closes PostHog#1600
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.

fix filepath text wrapping in diff panel

1 participant