55

Before

enter image description here

After

enter image description here

This isn't my eyes playing tricks on me, is it? I'm curious to know if the code block style has actually been changed, and if yes, why?

13
  • 1
    Repro-ed here, clearly visible (FF 65). Small change, though, not sure if it warrants a discussion.
    – Erik A
    Commented Mar 13, 2019 at 21:36
  • 19
    It is to make space for ads ...
    – rene
    Commented Mar 13, 2019 at 21:39
  • 11
    @ErikA I stumbled across this because I initially thought the padding was an extra space I'd inserted into my code. I'm afraid this will continue to trip me up a few more times. đŸ˜€
    – cs95
    Commented Mar 13, 2019 at 21:42
  • Ah, I can see how the top padding being almost equivalent to the old (nearly non-existent) padding + a newline can be somewhat annoying, even though you can't insert a newline as the first line in a code block when using the default (4 spaces) way to format it.
    – Erik A
    Commented Mar 13, 2019 at 21:51
  • 11
    Single-line code blocks look especially different now. I prefer the old version without much padding Commented Mar 13, 2019 at 22:29
  • 11
    When I first saw the changed style I though someone had messed up the indention of a code block. Please reduce that padding by at least half. Commented Mar 13, 2019 at 23:15
  • 11
    How do you have the before picture... do you just keep pictures of everything, in case it changes?
    – Shepmaster
    Commented Mar 14, 2019 at 0:02
  • 2
    @Shepmaster blame caching, man...
    – cs95
    Commented Mar 14, 2019 at 0:38
  • 2
    The new padding looks strange, I'm not a fan. It looks more like a GitHub code block now, but it somehow feels weird on Stack Overflow.
    – thirtydot
    Commented Mar 14, 2019 at 2:44
  • 2
    I kinda like it. It feels roomier than before.
    – Makoto
    Commented Mar 14, 2019 at 5:43
  • @rene pixelated ads is soooo passé
    – KarelG
    Commented Mar 14, 2019 at 8:40
  • Cross-site post on Meta.SE: What happened to code fences and Stack Snippets?. Commented Mar 14, 2019 at 14:11
  • I suspect this was implemented to fix this issue: meta.stackexchange.com/questions/155550/…
    – Turnip
    Commented Mar 14, 2019 at 15:56

2 Answers 2

33

This fixes an accessibility issue.

Depending on a system setting for scrollbars, the last line of <pre><code> blocks was blocked by the MacOS scrollbar in all browsers.

enter image description here

This has been reported on meta here, here, here, and here. It impacts a minority of folks for sure, but that still amounts to thousands of users having content blocked because of the way they prefer to view the web.

Since this is a system setting, we couldn’t find a reliable way to target only those people who were impacted. To further complicate things, we also discovered this bug was affected by whether or not a USB mouse was plugged in at the time.

So we increased the default padding to 12px (up from the existing 5px) for everyone. Initially we didn’t love adding extra spacing, but liked it after seeing it in action. The difference isn’t that excessive and it gives y’all a little more affordance to copy code blocks.

Although the root issue only impacts the bottom edge of code blocks, we’ve applied the same padding to all four sides. While we can’t reduce the vertical spacing any more, it’s a good point about the horizontal spacing and I’ve reduced it a bit. Here’s what that looks like:

enter image description here

This update will be live shortly, if it isn’t already.


Since we felt this improved the design AND fixed an OS-level bug allowing everyone to experience the same Stack Overflow, we pulled the trigger. We’ll monitor Mac OS updates to see if this issue is fixed by Apple.

11
  • 3
    Thank you. Those single liners have been an annoyance for a good few years now.
    – Turnip
    Commented Mar 14, 2019 at 16:49
  • 4
    "we also discovered this bug was affected by whether or not a USB mouse was plugged in at the time." -- đŸ˜Č thanks for the trivia. Is this is a known bug or something you have "further reading" material?
    – MSeifert
    Commented Mar 14, 2019 at 17:35
  • 23
    I'm OK with increasing padding-top and padding-bottom, but increasing the padding-left (and right?) probably breaks all those carefully crafted comment-to-the-edge-without-scrolling code blocks.
    – Bergi
    Commented Mar 14, 2019 at 17:37
  • 4
    @MSeifert I'm afraid I don't have a link, but would be interested if someone does. While testing, we discovered that if you have the MacOS system setting for "Show scroll bars" set to "Automatically based on mouse or trackpad" any Mac app with scrollbars will automatically re-adjust itself as you unplug a USB mouse and plug it back in.
    – Ted Goas Staff
    Commented Mar 14, 2019 at 17:48
  • 1
    Those were already on borrowed time, @bergi - responsive layout means it's no longer possible to know for sure that your code won't require scrolling.
    – Shog9
    Commented Mar 14, 2019 at 19:11
  • 3
    @Bergi The number of characters displayed per line in code blocks, even at the default maximum (i.e. not considering responsive design), varies from browser to browser and OS to OS. See Layout: Make the textarea (edit box) for answers and the preview reflect the final width even before posting
    – Makyen Mod
    Commented Mar 14, 2019 at 21:00
  • stackoverflow.com/q/24497034/2908724
    – bishop
    Commented Mar 15, 2019 at 7:20
  • If the issue was only scrollbars along the bottom, why was padding-top added as well?
    – TylerH
    Commented Mar 15, 2019 at 7:28
  • I'm not sure I like the extra padding, but blighting the codebase with if (browser = Safari) {} would be a greater evil. Commented Mar 15, 2019 at 21:08
  • A reason not to use an Apple? :) Commented Mar 15, 2019 at 21:22
  • @Turnip so this bug has been annoying users for years.. i wonder if anybody ever bothered reporting the bug to Apple - and if the answer is no, i don't blame Apple for having it around for years, can't expect them to fix bugs they don't know about.
    – hanshenrik
    Commented Mar 15, 2019 at 21:41
30

Noticed it, it seems a bit excessive to me.

Especially the left-side padding makes it seem like there's an extra empty column in front of each line, which can actually be meaningful in some cases. Also the top and bottom paddings start to take a lot of space in posts that have multiple short code blocks (which isn't all that uncommon in e.g. unix.SE, what with all the command line commands. For example, this one has a few of those, though not single-line ones. Another with a couple single-liners on SO.).

It also makes inline code blocks look reaally different from

real code blocks.

The new spacing does have the upside that a horizontal scroll bar fits better without covering the text. If you have one that appears as required, that is. However, that has been discussed and adding extra space just for that purpose was just a while ago in Add some bottom padding to code snippets. With scrollbars set to always visible, the vertical padding really starts to add up.

I can see someone wanting to add some padding there, but can we tone it back down at least a bit?

5
  • 1
    funny you have a new contributor badge
    – Stargateur
    Commented Mar 14, 2019 at 0:08
  • 21
    @Stargateur they are new to contributing to Meta
    – Martijn Pieters Mod
    Commented Mar 14, 2019 at 2:07
  • @MartijnPieters Why do you use the plural pronoun "they" to refer to a user? Is it a common way to avoid saying "he/she" ?
    – machine_1
    Commented Mar 15, 2019 at 21:17
  • 3
    @machine_1 The singular they is commonly used in English when a person's gender is unknown or irrelevant in lieu of the awkward "he or she"/"his or her"
    – divibisan
    Commented Mar 15, 2019 at 21:43
  • 3
    @machine_1: I'm not using the plural pronoun "they". I'm using the singular pronoun "they".
    – Martijn Pieters Mod
    Commented Mar 16, 2019 at 13:20

You must log in to answer this question.

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