6

See the revision histories here:

The long code blocks page-stretch, as opposed to receiving their own max width and scrollbar (as they do on the Question page).

This caused me to misunderstand the "Side-by-Side" view's diff. It looked like an "answer" had been edited into the question, but there was no green text.

The right-hand side of the diff is completely off screen.

3
  • 2
    This is my doing. I did work to make the diff elements work on responsive pages, but CSS seems to not consider the scrollable <pre> elements to be collapsable when they're sitting inside a <table>. I'm gonna evaluate moving that page from being a massive table. Commented Feb 23, 2021 at 17:35
  • 1
    I noticed the same issue in this diff about a week ago: wordpress.stackexchange.com/posts/383658/revisions Commented Feb 23, 2021 at 17:39
  • 1
    @BrianNickel Making the diff view responsive with with limited width code blocks (i.e that have horizontal scrollbars) is possible with just CSS, without requiring any changes to the current HTML (i.e. using the existing HTML <table>). example
    – Makyen
    Commented Feb 23, 2021 at 18:57

1 Answer 1

13

This is fixed.

When working on review queues, I switched from using fixed width tables to flexbox for rendering the side-by-side HTML diff, and apparently <table> elements are just as stubborn about <pre> element width as flexbox, if not more so. Posts with wide enough code blocks caused the posts to explode outside of their containers.

Incidentally, we had a previously reported but similar problem with initial revisions (and possibly inline changes) for posts with very long code blocks, reported at Revision page now fails the x-overflow.

I decided to go big here and just make the whole page responsive, replacing the table with carefully calculated header rows that collapse in a reasonable but Designed-by-a-Developer™ way.

2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .