diff options
| -rw-r--r-- | src/content/style.css | 55 |
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 { |