Ensure min necessary width for collapsed trigger

Paulina Sedlak-Jakubowskarequested to merge
5476417-min-width-for-breadcrumbs-dropdown into master

What does this MR do and why?

In gitlab-org/gitlab-services/design.gitlab.com!4767 (merged) I have adjusted the calculation of collapsible breadcrumbs to work with the medium size of the component. This was reproducible for projects with names consisting of 4 letters. GDK project to verify this was http://gdk.test:8080/gitlab-org/iglu/-/tree/master/src/test/java/com/example?ref_type=heads

More context on the fix:

The original problem:

  • Original text item width: 45.16px
  • Dropdown replacement width: 47.05px
  • Current buttonWidth: 40px (too small)

The flickering cycle:

  • Algorithm uses 40px, thinks dropdown will fit → collapses item
  • Actual dropdown renders at 47.05px (larger than original 45.16px text)
  • Now it doesn't fit → tries to uncollapse
  • Back to 45.16px text → cycle repeats

Since releasing the fix, we've got a report of flickering breadcrumbs for https://gitlab.com/gitlab-org/dco/blob/master/README.md:

  • only on Firefox
  • not reproducible incognito
  • so far only reproduced by @kkloss

I created a project named the same but wasn't able to reproduce it locally, no matter the browser. But given the nature of the original problem, assuring there is enough space for the collapsed dropdown trigger seemed the best approach.

Kev was able to verify that this fix works.

References

Screenshots or screen recordings

Warning

Flickering content in the before screen recording

Before After
before_breadcrumbs_flickering after_breadcrumbs_not_flickering

How to set up and validate locally

  1. Enable directory_code_dropdown_updates feature flag.
  2. Make sure you have a project with a short project name. You can try dco, same as the reported project.
  3. Try opening that project in Firefox. Go to Project / Repository and navigate to READEME.md (mind that this may not be reproducible for you locally).

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports