Reputation dropdown on mobile is broken

Question

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.

Answer 1

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 <li> with position:relative.

When we're at full width this doesn't affect us, JavaScript calculates the position for the element and the logic in place works around the relative elements. When we're at a responsive width, CSS takes over and tells the dialog to have 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.