style.css: Let the numbers scroll with the code

Pinning them was wrong twice over.  Nothing covers them: at rest the
cell's background reaches exactly to where the code begins --- painting
the cell shows it does --- but a scroll draws the two out of step for a
frame, and what is seen crossing the numbers is the code arriving
before they have moved.  A background cannot fix a repaint.

Constraining the cell instead, so that only the code scrolls and the
numbers sit outside the box entirely, needs a max-width on a table
cell.  That is a hint a browser may ignore, and Firefox ignores it:
the table grows back to its longest line and the block stops
containing them again, which was the bug this all started from.

So the box scrolls, numbers and all.  They leave the view when the
code is scrolled far enough, which is the price of not lying about
where they are.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KxLpaNQThKfMG3ecCJptP9

1 files changed, 13 insertions, 16 deletions

diff --git a/src/content/style.css b/src/content/style.css
index 220fb43..58db85f 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -249,30 +249,27 @@ pre.lineno {
 }
 
 /* A line wider than the page scrolls inside the box that frames it.
-   Saying so on the pre alone is not enough: the line numbers sit in a
-   table cell beside the code, and a table grows to fit what it holds,
-   so the pre is never narrower than its longest line and never has
-   anything to scroll.  The box scrolls instead, and the numbers stay
-   where they are while the code moves under them. */
+   Saying so on the pre alone does nothing: the numbers sit in a table
+   cell beside the code, and a table grows to fit what it holds, so
+   the pre is never narrower than its longest line and never has
+   anything to scroll.  The box scrolls instead, numbers and all.
+
+   Pinning the numbers so they stay while the code moves was tried
+   and taken out.  Nothing covers them: at rest the cell's background
+   reaches exactly to where the code begins, but a scroll draws the
+   two out of step for a frame and the code is seen crossing them.
+   Constraining the cell instead, so that only the code scrolls,
+   needs a max-width on a table cell, which is a hint a browser may
+   ignore --- and Firefox does, whereupon the block stops containing
+   its own lines again. */
 .highlight, .listingblock .content {
   overflow-x: auto;
 }
 
-/* Collapsed, so the numbers sit flush against the code.  Left
-   separate, the cells stand two pixels apart: pinning the first to
-   the left edge moves it by that much, and the gap it leaves is a
-   strip the code scrolls through in plain view. */
 .listingblock table {
   border-collapse: collapse;
 }
 
-.listingblock td:first-child {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  background-color: var(--color-code-bg);
-}
-
 pre {
   overflow: auto;
 }