backnotprop / backnotprop/plannotator

Horizontal scrollbar unreachable on long diffs

Open
#1,048 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.