5

The left and right margins of the list items of the inbox are unbalanced and make me uncomfortable.

Chrome, Windows on 4k screen.

Screen shot with obligatory freehand circles. enter image description here

15
  • They appear as 10px paddings on each side, with one extra px on the right side as the margin of the scrollbar. For me (Firefox 56, Ubuntu, 1920×1080) it’s an exact 7px on each side. Dec 18, 2017 at 19:40
  • I'm also using Chrome on Windows and for me it looks like it should. Dec 18, 2017 at 19:51
  • 35
    No repro using Internet Explorer 4.0 on windows 95.
    – user4639281
    Dec 19, 2017 at 1:14
  • 7
    @TinyGiant i would think you would have bigger problems Dec 19, 2017 at 2:03
  • 3
    @Daniel That's probably why I couldn't repro it.
    – user4639281
    Dec 19, 2017 at 4:36
  • 3
    As Xufox mentions, the margin is 7px on both sides. It looks off because of Chrome's scrollbar rendering, not our styles.
    – animuson StaffMod
    Dec 19, 2017 at 6:10
  • @animuson: I'd say the fact that the design is assuming (but not explicitly setting!) a specific scrollbar width is still a bug and should be fixed. Setting an explicit width on the ul and/or li elements, as in li.inbox-item { width: 345px }, should do as a quick fix (for the inbox, that is; AFAICT, at least the achievements dialog seems to have the same issue too, and should be fixed the same way). Actually, just about any sufficiently large width would do, since the .modal-content div with the scrollbar has overflow-x: hidden anyway. Dec 19, 2017 at 15:39
  • Ps. I can repro this on Chromium 63 and Firefox 57 on Ubuntu by zooming out, which is the usual trick for deliberately triggering these intermittent off-by-one-pixel design bugs. Dec 19, 2017 at 15:47
  • @TinyGiant: Had to look it up for fun: IE4 was born over 20 years ago now!
    – Cᴏʀʏ
    Dec 19, 2017 at 15:57
  • @IlmariKaronen This isn't fixable. The problem is that some Windows browser actually have a 1px white border on the left side of the scrollbar, which makes the right margin look 1px wider. "Fixing" it for those browsers would involve making the right margin 1px smaller than the left, but that just leaves browsers which don't add that scrollbar border with unbalanced margins, so that's not really a fix.
    – animuson StaffMod
    Dec 19, 2017 at 16:30
  • what about not having native scrollbars @animuson? Dec 19, 2017 at 16:31
  • @DanielA.White I mean, if it bothers you that much, you can always use Chrome's settings to turn it off completely or switch to Chrome's overlay scrollbar (chrome://flags/#overlay-scrollbars) (I use that because I hate scrollbars).
    – animuson StaffMod
    Dec 19, 2017 at 16:35
  • 1
    @animuson: Take a closer look at the screenshot. The reason it looks wonky is not because one margin is a pixel or two smaller than the other, but because the text and the site logo are wrapping onto different lines. And that's happening because the logo and the text div have explicit pixel widths, but the scrollable list they're supposed to fit in doesn't. The extra CSS I included in my comment above would fix that (although switching to a flex layout might be an even better fix). Dec 19, 2017 at 16:49
  • 1
    @IlmariKaronen Care to edit the screenshot to clarify what people are supposed to be looking at? The current circles make you focus on the white margins, not the inbox items.
    – animuson StaffMod
    Dec 19, 2017 at 16:52
  • @animuson: It's not my screenshot, and on my computer I can only reproduce this when zoomed out a lot. It's pretty obvious if you compare Daniel's screenshot to how the inbox is supposed to look like, though. I guess I can make another (zoomed-out) screenshot, if it helps. Dec 19, 2017 at 16:55

1 Answer 1

10

The real problem here is that the site logo and the notification text don't quite fit onto the same line on your browser, causing them to be wrapped onto different lines.

I can't reproduce the problem at normal size on my computer, but I can reproduce it on both Chromium 63 and Firefox 57 if I zoom out enough:

Buggy inbox with site logo and text wrapped onto separate lines   Same inbox with fixed CSS

Left: Broken inbox rendering when zoomed out. Right: Same inbox with fixed rendering.

The reason this is happening is because both the site logo and the div containing the text have explicit pixel widths, but the scrollable list they're supposed to fit in doesn't, so the browser effectively calculates its width as the total width of the inbox dialog minus the scrollbar width. And since the scroll bar width can vary depending on the user's browser, OS, zoom level and theme, there's no guarantee that the list will actually be wide enough to fit the inner elements correctly.

The design does leave some room for such variations, so that most of the time the inner elements will fit with several pixels to spare. But sometimes, as this bug report illustrates, they don't.

A quick and simple fix for this bug would be something like this:

.topbar-dialog.inbox-dialog .modal-content ul,
.topbar-dialog.modInbox-dialog .modal-content ul,
.topbar-dialog.achievements-dialog .modal-content ul {
    min-width: 345px;
}

This will force the list to always render at least 345 pixels wide (the width it currently has on my browser at normal zoom), which should be plenty to accommodate the content. Actually, any width greater than about 340 pixels or so should work: the inner elements have fixed widths, so they won't expand too far anyway, and the .modal-content div is already styled as overflow-x: hidden.

Another small change that would make the layout more predictable would be to change the HTML so that there's no whitespace between the site logo and the text div. On my browser, at normal zoom, that whitespace adds a 3 pixel gap between the logo and the text, but the actual width of the gap will vary depending on the user's font settings (and zoom level). Replacing it with e.g. a 3px margin on the logo would make the width of the content inside the scrolling list more predictable.

An even better solution would probably be to rewrite the dialog styling to use CSS flex layout instead of relying on fixed width inline-blocks to achieve horizontal block stacking. While that would take somewhat more work than just adding a single extra CSS rule, it should actually allow the dialog layout to be made fully robust against width changes.

1
  • All those efforts for a pixel, such perfectionism Dec 21, 2017 at 18:49

You must log in to answer this question.

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