12

After adding a few code blocks, the about me section on my profile page just overflowed the page horizontally.

My broken profile page

There are supposed to be scrollbars on the code blocks and not on the page itself.


Device Details

I don't know whether other people can see this bug or not. Here are some details to reproduce the bug.

  • Browser: Microsoft Edge 94
  • Operating System: Windows 11
9
  • 4
    Can see it in chrome as well.
    – Suraj Rao
    Commented Oct 21, 2021 at 6:32
  • 13
    Sigh, here we go again. Repro in FF 93.0 on Linux Mint. This is a regression of one of many bugs (take your pick - has historically happened on profiles, questions/answers, 10k tools, revision history, etc.) where code block scroll bars are disabled, meaning sufficiently vertically long code blocks break the container size. This is sadly not contained to profiles; the 10k tools have also broken, but in a weirder way. (The scrollbar is applied in the wrong place). Questions and revision histories are good at least Commented Oct 21, 2021 at 6:32
  • 1
    oh, no, it is a well-known issue reported several times. Will find a couple of related links shortly. What wretched reason they decided not to do proper text wrapping for, I have no idea.
    – 0Valt
    Commented Oct 21, 2021 at 6:42
  • 2
    @OlegValter text wrapping doesn't always make sense for code. How they manage to repeatedly break scrollbars, however, is beyond me. You'd think they'd have tests for it by now Commented Oct 21, 2021 at 6:45
  • 2
    @Zoe I know :) That said... many of us provided alternatives to this overflow. The scrollbars issue is very tightly related to the inability to fix the source issue...
    – 0Valt
    Commented Oct 21, 2021 at 6:46
  • 4
    Example of the issue fixed with a one-line change in CSS.
    – 0Valt
    Commented Oct 21, 2021 at 6:53
  • 3
    Didn't they recently intentionally break profiles because they were making it "responsive"? Oh, they reverted that never mind :). Commented Oct 21, 2021 at 13:24
  • 1
    For what it's worth, repro on MacOS with Brave (i.e. essentially Chromium)
    – tripleee
    Commented Oct 22, 2021 at 6:06
  • 3
    It's fixed now Commented Oct 22, 2021 at 18:38

1 Answer 1

6

This issue has been fixed. The problem was due to a way that pre tags interact with flexibly sized containers (a css grid column in this case). Since I probably can't explain it well enough, here is an article that does.

From the linked article:

I can’t promise I’m explaining this 100% accurately, but the way I understand it, the minimum width of a grid column is auto. [...] And since auto is entirely based on content, we can say it is “indefinitely” sized, its dimensions flex. If we were to put an explicit width on the column, like 50% or 400px, then we would say it is “definitely” sized. To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.

Despite the somewhat unintuitive cause, the fix is actually pretty simple.

As for why we don't do text wrapping on code blocks, it's precisely because they are code blocks. This is generally a personal opinion (like tabs vs spaces), but the stance we are taking is that applying text wrapping to code can cause unnecessary confusion in regards to things such as line numbers and literal whitespace (which is important in certain languages like Python).

You must log in to answer this question.

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