squint: the three panes scroll together

Before, after and diff are three columns inside one scrolling box now.
There is no synchronising code because there is nothing to synchronise:
one box has one scroll position, so the three move as one. Panes that each
scrolled on their own meant lining them up by hand every time, which is
most of the work of comparing them.

The column labels are sticky, so half way down a long screenshot you still
know which one you are reading.

Images stay at their natural size rather than being scaled to fit: three
390-wide phone pages side by side is about 1200px and fits, and a page
shrunk to the viewport is illegible, which was the original complaint. A
1280-wide desktop page makes the box scroll sideways as well, and that
scrolls together too.

This replaces the flip control, which compared before and after by swapping
one slot. It was a good way to spot a change and a bad way to study one --
you cannot look at the diff at the same time, and the diff is where the
answer usually is.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X1aAjLD4wvan3wsmkHPPh3

James Millscommitted 1 month agoparent 79152e8d4c553eb4d2bc688fc114550820bd087b1ec2aeeBrowse files