CSS for Line Number, displays too wide

[glerner]

Two issues:

1. The line number td displays half-screen width, unless the code is wider than half-screen (if wide, the code pushes the line number td to the left)
2. On narrow screens, the line numbers display on their own lines, followed by the code lines

This is the CSS needed:

.syntaxhighlighter table td.gutter {
    max-width: fit-content;    /* prevent wide line number table cells */
}

.wp-block-syntaxhighlighter-code tr {
    display: inline-table;	/* prevent line numbers on their own lines, followed by code lines */
    /* or display: block, or inline-flex also work */
}

Steps to Reproduce

1. Insert a code block
2. Leave the Align to none
3. Line number shows so line number is in center of window, unless width of the code pushes it to the left
4. On narrow screens, get several lines with only line numbers, followed by several lines with only code. Line numbers aren't "attached" to the code lines.

PHP / WordPress / SyntaxHighlighter Evolved version

WP version: 6.7.2 Twenty Twenty-Four (twentytwentyfour) version: 1.3 SyntaxHighlighter Evolved Version 3.7.2 php_version: 8.2.26 64bit

Browser / OS version

Brave (Chrome based) Version 1.77.97 Chromium: 135.0.7049.84 (Official Build) (64-bit) Linux Mint 21.2 Cinnamon