When I try to open my reputation notifications on the responsive design on my phone, I get this:

enter image description here

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.

  • 4
    This was me. working on a fix. – Brian Nickel Jun 20 '19 at 17:45
  • 3
    Doesn't actually relate specifically to mobile. You can repro this on any window by making it narrow enough. – Catija Jun 20 '19 at 17:51
  • @Catija Sure, but...who does that? – Draco18s no longer trusts SE Jun 20 '19 at 20:28
  • @Draco18s anyone who does split-screen stuff on a computer for one. Keeping a relatively narrow browser window next to an editor for an instance. – Zoe the 1337 Princess Jun 20 '19 at 20:43

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.

You must log in to answer this question.

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