Skip to content

Fix spacing around inline badges

Sarah German requested to merge 1730-inline-badges into main

What does this MR do and why?

Fixes spacing around inline badges when more than one is present.

Regression introduced here: !4395 (merged).

We need to remember we have three kinds of badges:

  1. Heading-level badges, added in markdown files.
  2. Badges added programmatically to site sections, based on URL path (currently just Contributor and Solutions pages).
  3. Inline badges, added in markdown files, but inside paragraphs or tables.

And these rules for combinations:

  • Badge types A and C can have multiple badges.
  • Badge type B will just have one badge, but it may or may not be rendered alongside badge type A.

When we modify badge styling, we should consider all of these scenarios.

Screenshots, screen recordings, or links to review app

Before After
image image

Other badge examples (no changes expected):

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Visit pages with various badge combinations (see above for example URLs).
  3. Badges should be evenly spaced.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #1730 (closed)

Edited by Sarah German

Merge request reports