backnotprop / backnotprop/plannotator
Horizontal scrollbar unreachable on long diffs
- Dominant language
- TypeScript
- Stars
- 8.7k
- Forks
- 649
- Avg merge
- 11h 12m
- Merged PRs (30d)
- 109
Description
## Description
In the code review / annotate UI, the horizontal scrollbar for a file's content sits at the very bottom of that file's scroll container. On any diff longer than ~100 lines, the scrollbar is pushed below the fold, so when a long line is clipped at the right edge there's no visible way to scroll horizontally from where you're reading.
The current workaround is painful: scroll all the way down to the bottom of the file, drag the horizontal scrollbar, then scroll back up to the line you were actually reviewing — and repeat if you need to pan again.
## Steps to Reproduce
1. Open the code review UI on a diff that is a few hundred lines long and contains lines wider than the viewport.
2. Find a clipped long line somewhere in the middle of the file.
3. Note there's no horizontal scrollbar in view — it only exists at the very bottom of the file's content.
## Expected Behavior
Horizontal scrolling should be reachable from anywhere in the file. Two options:
- **Sticky-bottom scrollbar**: pin the horizontal scrollbar to the bottom of the browser viewport while the file's content is on screen (the pattern GitHub uses for wide diffs/tables), or
- **Sticky-top scrollbar**: render the horizontal scrollbar above the file content, stickied to that file's header, so it stays visible as you scroll through the diff.
Either works — the point is the scrollbar tracks the viewport, not the bottom of the document.
## Actual Behavior
The scrollbar is anchored to the bottom of the file's full content height, so on long files it's off-screen during review. Reading a clipped line requires scrolling to the bottom, panning horizontally, and scrolling back up.
## Environment
- macOS (Darwin 25.x)
- Plannotator via the Claude Code plugin
- Browser: Chrome
Contributor guide
Research direction
Start in the code review / annotate UI and reproduce the issue with a long diff containing clipped lines in the middle of the file. No file or test is named in the issue; done means horizontal scrolling is reachable while reading any visible part of a long file, and the behavior is verified in Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100