Skip to content

gl-breadcrumbs text not aligned when avatar is present

Summary

The breadcrumb alignment appears to be off, particularly when an avatar is present. Upon closer inspection, the baseline alignment varies across elements:

  • Items 1 and 3 share the same baseline.
  • Items 2 and 4 share a different baseline.

This misalignment creates a noticeable inconsistency in the appearance of the breadcrumb component.

Steps to Reproduce

  1. Include a breadcrumb component (gl-breadcrumbs) with an avatar as one of the breadcrumb items.
  2. Observe the alignment of the text and avatar elements within the breadcrumb.

Expected Behavior

All breadcrumb items should share the same baseline alignment, regardless of whether an avatar is present.

Current Behavior

The baseline alignment differs:

  • Text-only breadcrumb items (1 and 3) align differently from breadcrumb items with an avatar (2 and 4).

Screenshots

Example of the misalignment: Breadcrumb alignment issue

Possible Cause

The avatar component within the breadcrumb may be causing the misalignment.

Additional Context

  • Component: GitLab-UI gl-breadcrumbs
  • This issue was observed in a recent screenshot provided by a team member.

Suggested Fix

Review the gl-breadcrumbs component to ensure consistent baseline alignment for all items, including those with avatars.

Edited by James Rushford