Long lines do not wrap properly

[JonnoFTW]

I am trying to view a .tex file with very long lines, but the <pre> element does not split these long lines despite it having element style:

word-wrap: break-word;
white-space: pre-wrap;

Adding !important to these rules makes the line wrap, but there is no padding at the start of the newline, so it goes below the line number margin:

[tsenart]

Have you got an URL I can reproduce this with?

[JonnoFTW]

@tsenart https://raw.githubusercontent.com/JonnoFTW/UA-AID/master/tex/proposal.tex

[tsenart]

@JonnoFTW: Have you got any fix in mind?

[JonnoFTW]

I don't know sorry, my CSS skills aren't that good.

[YellowAfterlife]

It seems like a commonly used method for dealing with this is making the "code area" a <table> with two columns per line/row - one for line numbers (containing a ::before akin to how .line does already), and one for actual code. This way, when the code wraps, the line-number-cell extends it's height, and it remains aligned accordingly.

<table>
<tr><td class="line"></td><td>(line 1)</td></tr>
<tr><td class="line"></td><td>(line 2)</td></tr>
</table>

pre table {
    border-spacing: 0;
    border-collapse: collapse;
}
pre td.line {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    min-width: 2em;
}

GitHub uses a similar approach for displaying code in repositories.

[tsenart]

@YellowAfterlife: Would you draft a PR?

[YellowAfterlife]

I'll try tomorrow. Been a little while since I've last poked with actual Chrome extensions (as opposed to making userscripts).

[YellowAfterlife]

@tsenart This wasn't particularly "tomorrow", but here: https://github.com/tsenart/sight/pull/88

[tsenart]

@YellowAfterlife: I'll take a look at your PR tomorrow.