Incorrect dropdown styling for embedded metric charts
Summary
The styling for dropdowns within metric embeds is incorrect.
Steps to reproduce
- Embed a prometheus metric chart within an issue (or other gitlab flavored markdown)
- Open the dropdown on the top-right of the chart.
Example Project
gitlab-org/monitor/monitor-sandbox#662
Actual vs Expected
Actual dropdown styling | Expected dropdown styling (from dashboard) |
---|---|
Note that the spacing around the dropdown items and the hover styling is not correct in the Actual
case.
Possible fixes
The reason for the styling is that embeds are nested within markdown, and markdown has a number of global styling overrides applied to certain elements.
A couple of potential solutions:
- Add embed-specific overrides for the affected element -
<li>
. This has already been done for the<h3>
element - see https://gitlab.com/gitlab-org/gitlab/-/blob/d4d5e6855d099b68ada9001f84b16c2f1bcd0d6f/app/assets/stylesheets/framework/typography.scss#L527. - Scope the markdown css more closely, e.g. set classes on markdown elements and remove element styling overrides.