Skip to content

Pipeline icons are misaligned

Summary

The pipeline icons are not properly aligned.

Steps to reproduce

Any pipeline with child pipelines.

What is the current bug behavior?

The pipeline icons are misaligned with child pipelines.

What is the expected correct behavior?

The icons are all aligned.

Relevant logs and/or screenshots

They are misaligned by two pixels:

image

Output of checks

This bug also happens on GitLab.com:

image

Screenshot taken from: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/179672 (Linking it like this, so it doesn't get an unneeded reference)

Possible fixes

Playing around in the firefox dev tools, gave me a hint that one of the pipelines' icons was marked as gl-inline and another as gl-inline-flex.

Marking both as gl-inline-flex aligns them properly. But I don't know if that is the correct fix 😄

It looks like this comes from here:

https://gitlab.com/gitlab-org/gitlab/-/blob/346a72c676cb4cb443ea8bfc4f7d673057819f26/app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stages.vue#L25-27

https://gitlab.com/gitlab-org/gitlab/-/blob/346a72c676cb4cb443ea8bfc4f7d673057819f26/app/assets/javascripts/ci/pipeline_mini_graph/downstream_pipelines.vue#L62-64

Edited by 🤖 GitLab Bot 🤖