You need to sign in or sign up before continuing.
Fix MR widget buttons alignment when page width is narrow
What does this MR do and why?
On the MR details page, there are some MR widgets with buttons on the right. This MR fixes 2 issues with the button alignment when the page width gets narrow:
- For the security scanning widget, the buttons will align to the left and the text will shift one pixel up once the page width is below ~990px. This has been fixed so that the buttons will always align to the right, and the text won't shift up:
| Before | After |
|---|---|
| Peek_2022-10-06_16-12 | Peek_2022-10-06_16-10 |
- For the other MR widgets (like the License Compliance widget), when the text to the left line wraps onto a 2nd line, the buttons are properly sticking to the top, but the button hover state background is using 100% height. This has been fixed so that the background is only as tall as the text is:
| Before | After |
|---|---|
| Peek_2022-10-06_16-13 | Peek_2022-10-06_16-14 |
Note that for #2, to reproduce the Before behavior the page width must be >=992px and the text to the left must line wrap. The easiest way to do this is to open the right sidebar, or edit the text to be super long.
How to set up and validate locally
- Clone this project locally: https://staging.gitlab.com/secure-team-test/denied-licenses-test
- Use the Web IDE, make any edit, then commit it to a new branch and create a MR for the branch.
- Go to the MR details page and wait for the pipeline to finish running.
- Verify that the MR widget buttons have the fixed behavior mentioned above.
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.
Related to #377347 (closed)
Edited by Daniel Tian