When I try to open my reputation notifications on the responsive design on my phone, I get this:
It's really thin, I can't see any of the items in there, and the links are off to the side. It happens at least on Literature.SE and Meta.SE.
Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.Sign up to join this community
This is fixed.
I made some accessibility related improvements to the topbar (tabbing and screen readers) which involved moving where in the DOM we placed the topbar.
To ensure control flowed from the button to the dialog it generated, the dialog needed to appear between the current and the next button in the DOM. The simple solution was
$dialog.insertAfter($button). Unfortunately, the buttons exist in an
left: 0; right: 0 relative to its positioning container, the button's list item.
Now, the logic is a little more advanced. If we see we're in a list item, we insert a
<li role="presentation"> item immediately after the button's item, and insert the dialog there. We know this works for responsive, because the old dialog container was doing the same thing, just at the end of the topbar.