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
- Include a breadcrumb component (
gl-breadcrumbs) with an avatar as one of the breadcrumb items. - 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
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
