DND dropdown menu outside browser boundaries

Troubleshooting
1

Summary
The dropdown menu, that should appear while hovering over “Do not disturb” is not showing up.

Steps to reproduce

  • Login on your Mattermost Instance
  • Click on your profile picture in the top right corner
  • Hover over “Do not disturb”

Version is 10.2.0 Enterprise Edition, self hosted via Docker (Image mattermost/mattermost-enterprise-edition:10.2)
The issue is known for all users since at least september 2023 and affects the Desktop App as well as the webapp on Chrome and Firefox.

Expected behavior
You should see a dropdown menu with “Clear after ”

Observed behavior
Nothing shows up.
In the Inspector you can see the ally__popup Menu dropdown-menu SubMenu has style="visibility: hidden; top: 196px; right: 100%".
As the place it opens is already on the most-right, it will “show” the menu outside the boundary of the browser.
So if I change it in the inspector to style="visibility: hidden; top: 196px; right: auto" I can see the Dropdown Menu just fine.

1 Like
2

The problem persists after the upgrade to version 10.5.1

inspector view
inspector view1920×1446 327 KB

inspector code
inspector code805×173 49.3 KB

3

This appears to be a UI positioning bug where the dropdown is rendered out of view due to the right: 100% style. A quick fix is to override the CSS:

.ally__popup.dropdown-menu {
    right: auto !important;
}

You can apply this via a custom CSS override or a browser extension like Stylus. Since it affects all users across multiple browsers, it’s worth reporting to Mattermost for a permanent fix in future updates.

4

Thank you @Scarlet for the reply.
I opened up an Issue on GitHub.

1 Like