style.css: Keep the numbers still by taking them out of the scroll

The numbers left with the code because they were inside the box that
scrolls.  Pinning them there was tried first and taken out: nothing
uncovers them, but a scroll draws the two out of step for a frame and
the code is seen crossing them.

The answer is that only the code should scroll.  That needs the cell
holding it to be allowed to be narrower than what it holds, and a
table is free to ignore being told so --- Firefox does, and the block
goes back to not containing its own lines.  A row laid out as a flex
line is not free to ignore it: min-width there is honoured, the code
gets a box smaller than its content, and the numbers beside it are
not in that box at all.  Nothing to pin, so nothing to fall behind.

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

1 files changed, 39 insertions, 16 deletions

diff --git a/src/content/style.css b/src/content/style.css
index 58db85f..fca0f01 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -248,26 +248,49 @@ pre.lineno {
   background-color: var(--color-code-bg);
 }
 
-/* A line wider than the page scrolls inside the box that frames it.
-   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.
+/* A line wider than the page scrolls, and only the code does, so the
+   numbers stay where they are.
+   
+   Saying "overflow" on the pre alone does nothing while the two sit
+   in a table: a table grows to fit what it holds, so the pre is never
+   narrower than its longest line and never has anything to scroll.
+   Telling the cell it may be narrower is a hint a table is free to
+   ignore, and Firefox ignores it.  A row laid out as a flex line is
+   not: "min-width: 0" there is honoured, and the code finally has a
+   box smaller than its content to scroll inside.
+   
+   Pinning the numbers instead --- leaving them in the scrolling box
+   and sticking them to its edge --- was tried and taken out.  Nothing
+   uncovers them, but a scroll draws the two out of step for a frame
+   and the code is seen crossing them. */
+.listingblock table,
+.listingblock tbody {
+  display: block;
+}
 
-   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 {
+.listingblock tr {
+  display: flex;
+}
+
+.listingblock td {
+  display: block;
+}
+
+.listingblock td:first-child {
+  flex: 0 0 auto;
+}
+
+.listingblock td:last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.listingblock td:last-child pre {
   overflow-x: auto;
 }
 
-.listingblock table {
-  border-collapse: collapse;
+.highlight {
+  overflow-x: auto;
 }
 
 pre {