Fix long dropdown on branch selection
What does this MR do and why?
Add max-width class to toggle button and wrapping to dropdown breadcrumb to improve the display when viewing files in GitLab.
Closes #391782 (closed)
Out of scope
- Dropdowns in "Repository > Compare" are not using RefSelector
- Dropdowns in "Settings > Merge request approvals", "Settings > Repository > Protected branches" are not using RefSelector
Screenshots or screen recordings
Repository > Files (/-/tree/)
Max-width applied to dropdown (-/branches)
| Before | After |
|---|---|
 |
 |
Long directories now wrap
| Before | After |
|---|---|
 |
 |
Repository > Commits (-/commits/main)
| Before | After |
|---|---|
 |
 |
Repository > Tags > New Tag
| Before | After |
|---|---|
 |
 |
Repository > Contributors
Should look the same as the original fix for the dropdown here was done with Change contributors page to use Vue RefSwitcher (!109043 - merged) and we want to ensure there is no visual regression here.
| Before | After |
|---|---|
 |
 |
Repository > Graph
| Before | After |
|---|---|
 |
 |
Repository > Files > Find File
| Before | After |
|---|---|
 |
 |
Code search from top nav
| Before | After |
|---|---|
 |
 |
Pipelines > Schedules > New schedule
| Before | After |
|---|---|
 |
 |
Security & Compliance > On demand scans > New scan
/-/on_demand_scans/new
| Before | After |
|---|---|
 |
 |
Settings > Repository > Branch defaults
/-/settings/repository
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
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.
Edited by Michael Le