Fix top-nav search bar dropdown on xl displays
What does this MR do?
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/66075 and https://gitlab.com/gitlab-org/gitlab-ce/issues/64120
On "xl" displays (those >=1200px wide), "missed clicks" frequently occur because the top-nav search bar loses focus and starts shrinking/moving when doing "mousedown" in the autocomplete dropdown. By the time of "mouseup", the dropdown has moved, so the full click registers on empty space instead of the link.
On "xl" displays, the top-nav search bar is set to width: 200px
when unfocused and expands to width: 320px
when focused. It then shrinks back to width: 200px
on blur. Thus width:320px
is already a proven and usable size for the search bar on "xl" screens. I wanted to preserve the larger size of the bar on "xl" screens, and bring the UI behavior inline with the behavior that already exists for "md" (>=768px wide) and "lg" (>=992px wide) displays, specifically no expansion of the top-nav search bar.
The simplest possible mechanism I see then is to use the proven width: 320px
as the unfocused width and the focused width on "xl" displays (just as width: 200px
is the unfocused and focused width for "md" and "lg" displays). Since this would no longer reflect an exclusively "active" width, I've renamed the corresponding scss variable. I did a grep of the stylesheets, and this variable is only used in the places I've changed it.
I do not see additional risks with this as I am using a size already in use for the top-nav search bar (320px) and this modified behavior actually brings greater consistency to the top-nav search bar UI, aligning the behavior of "md", "lg", and "xl" displays. For clarity, the top-nav search bar is hidden on displays smaller than "md", thus comparison is not applicable for smaller displays.
Bootstrap Breakpoints for reference: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
Screenshots
Before 1280px
After 1280px
Before 1920px
After 1920px
New behavior on "xl" display
Old missed click behavior on "xl" display
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry for user-facing changes, or community contribution. Check the link for other scenarios. -
Documentation created/updated or follow-up review issue created -
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
-
Separation of EE specific content
Performance and Testing
- [-] Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
- [-] Tested in all supported browsers