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.