[BUG] File breadcrumbs flickers
Description
Users are experiencing a flickering issue in breadcrumbs where short folder names (typically 3-letter words like "app", "foo", "sre", "iglu") continuously toggle between the actual name and "..." ellipsis. This makes the breadcrumbs unusable as users cannot click on them.
Root Cause Analysis
Based on technical investigation, this flickering occurs when two conditions are met:
- Width similarity: The first breadcrumb item's width is almost the same as the collapse button's width (common with 3-letter words)
- Layout constraint: The GlBreadcrumb component's DOM element lacks CSS to take all available horizontal space, throwing off resize calculations
Technical Details
- This specific component is in
app/assets/javascripts/repository/components/header_area/breadcrumbs.vue(ref) - The GlBreadcrumb component needs space to "grow into" to calculate proper widths. See auto size doc
- However, in this case, we have the copy button append to the end of the breadcrumb
Steps to Reproduce
- Navigate to a path with short folder names. Couple examples:
- Observe the breadcrumb behavior
- Notice continuous toggling between folder name and "..."
Related slack threads:
- https://gitlab.slack.com/archives/CETG54GQ0/p1747734066276059
- https://gitlab.slack.com/archives/CETG54GQ0/p1748323023763969
Implementation plan
-
In GitLab UI, add a slot to GlBreadcrumbs in which we could place the Copy file path icon button. Remember to create a separate story for the GitLab UI Storybook to showcase that variantadjust calculation for collapsible breadcrumbs to work for medium size variant -
In GitLab UI, fix a scrollbar on the breadcrumb item that appears for mdsize. Tip: this might be easier to reproduce in Firefox or Safari, but happens in all browsers. -
In GitLab, make sure the newer version of @gitlab/uipackage with the above fixes is merged -
In GitLab, apply fix for the breadcrumbs flexbox (!193194 (closed))
Edited by Paulina Sedlak-Jakubowska
