The left and right margins of the list items of the inbox are unbalanced and make me uncomfortable.
Chrome, Windows on 4k screen.
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:
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.
ul
and/orli
elements, as inli.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 hasoverflow-x: hidden
anyway.chrome://flags/#overlay-scrollbars
) (I use that because I hate scrollbars).