[MR Widget V2] Fix button styling issues
Original comment: #378886 (comment 1172261123)
The action button has some rendering issues:
- It's not vertically centered with the
?icon to the left of it, and sits a bit higher (zoomed in to exaggerate the effect). This is not due to the button itself, but rather because the?icon is not centered within its container:
Not vertically centered with ? icon |
? icon is not centered within its container |
|---|---|
 |
 |
- The icon is not horizontally centered within the hover background, and sits a bit to the left. This is because the icon SVG has a right margin:
| Icon not horizontally centered within its container | Icon SVG has right margin |
|---|---|
 |
 |
- This one is more personal opinion, but the vertical padding is 4px, which looks unbalanced (vertical padding is too small compared to the horizontal padding). Looking at some of the other icons in the page (like the ones in the header) the vertical padding is 6px, which looks a more balanced when applied to the download icon:
| 4px vertical padding | 6px vertical padding |
|---|---|
 |
 |
Verification steps
-
Go to https://gitlab.com/svedova/security-reports/-/merge_requests/1 -
Expand the security reports widget -
Check that icons are rendering without any styling issues
Edited by Savas Vedova