Align help icon for code quality MR widget
What does this MR do?
Related to #283892 (closed)
Fixes the alignment for the help icon in merge request report widgets.
Screenshots (strongly suggested)
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.
Does this MR meet the acceptance criteria?
Conformity
-
📋 Does this MR need a changelog?- [] I have included a changelog entry.
-
I have not included a changelog entry because _____.
- [-] Documentation (if required)
- [] Code review guidelines
-
Merge request performance guidelines - [-] Style guides
- [-] Database guides
- [-] Separation of EE specific content
Availability and Testing
- [-] Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
-
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done