Align help icon for code quality MR widget
All threads resolved!
All threads resolved!
Compare changes
Files
2@@ -190,10 +190,14 @@ export default {
Related to #283892 (closed)
Fixes the alignment for the help icon in merge request report widgets.
The change is subtle, but notice in the before screenshot that the SVG had 1 extra pixel on top that was pushing it down. This is primarily due to how the help_popover.vue
component is set up; it wraps the popover and the SVG in a span since there can only be one root component. This causes the popover to force a single pixel above the SVG, but can be fixed by making the component display: inline-flex
.
Before | After |
---|---|
![]() |
![]() |
I also changed the text to be wrapped in a p
tag so that it can be forced to the proper line height. Without this, the line height was 17px
, but now it is forced to 16px
. This forced me to add the the proper flex classes to the wrapper around the text and the popover button to make sure everything lined up properly.