Fix: mr approvers alignment
What does this MR do and why?
This MR fixes the approvers alignment issue.
I found that the alignment in the approvers section looked weird, so I did some investigation:
The avatars were set to 24px with the attribute img-size="24", but there was extra 5px(2 padding top + 3 unknown) to the parent container div when the container is set to display: inline-block. When we change the display to inline-flex, the extra 3px will be removed, then we remove the extra pt-1 to get rid of the 2px padding top, now the elements were properly aligned.
We also have a solution which is to set font-size: 0; line-height: 0 for a container contains no texts, the result will be the same but I'd prefer the first solution.
/cc @mtan-gitlab @orozot
Describe in detail what your merge request does and why.
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
 |
 |
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
How to set up and validate locally
- Open any MR with merge approvers.
- Zoom in to 200% and inspect the elements.
- Observe.
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.