thp / urlwatch

Watch (parts of) webpages and get notified when something changes via e-mail, on your phone or via other means. Highly configurable.
https://thp.io/2008/urlwatch/
Other
2.79k stars 350 forks source link

Improves HTML diff table format for long line lengths. #793

Closed trevorshannon closed 5 months ago

trevorshannon commented 5 months ago

If very long lines are present in an HTML diff report, the HTML table layout can become less than ideal. One half of the diff can be very wide and the entire table can be wider than the screen.

The built-in difflib output includes a nowrap HTML attribute on the table cells containing diff text lines. However, wrapping diff lines is both useful and typical. See the below GitHub diff screenshot for an example:

Screenshot 2024-02-05 at 12 17 38 PM

This PR uses CSS to override that nowrap attribute and allow for sane line wrapping while also ensuring the left and right halves of the diff table are equal width.

Current rendering:

Table is too wide for the viewport, left side is much narrower than the right.

Screenshot 2024-02-05 at 12 39 14 PM

Proposed rendering:

Table fits within the viewport, both sides are equal width, long diff lines are wrapped without adversely affecting line numbering.

Screenshot 2024-02-05 at 12 39 04 PM Screenshot 2024-02-05 at 12 39 37 PM
Jamstah commented 5 months ago

You should also update the CHANGELOG.md.

trevorshannon commented 5 months ago

oops, thanks I always forget that.