Prevent height overflow of sidebar flyout menus on small screens
What does this MR do and why?
Uses the shift() middleware that comes with floating-ui to keep the flyout menu inside the window by shifting it up/down as much as needed, but still keeping it as close as possible to its intended position.
CSS max-height and overflow-y: auto take care of the rest.
Related to #415343 (closed), see !124863 (comment 1462142472) for details.
Screenshots or screen recordings
Too small for intended floating position, but enough to need no scrollbar yet
| Before | After |
|---|---|
 |
 |
Too small for flyout height
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- These flyout menus were initially not part of the navigation redesign, so they are currently still behind a feature flag, so in your
gdk rails console, run:
Feature.enable(:super_sidebar_flyout_menus)-
Then, make sure you have the new navigation toggled on in your user dropdown.
-
Browse to any project or group, or the admin page. Here some of the collapsible sections have many child items, so the issue is easy to reproduce. Easiest with the Settings section, because it is at the very bottom of the sidebar.
-
Decrease your browser window height. See the flyout menu being opened in a slightly shifted position if it wouldn't fit on the screen otherwise.
-
Decrease the window height further to see the scroll bar inside the flyout.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.