fix(FilterNavigatorBar): clip overflow so many breadcrumbs do not expand the parent

[spokodev]

Fixes#6028.

Without overflow: hidden, the breadcrumb bar's intrinsic min-content width (sum of all nowrap children) propagates up through the flex column parent and forces #flame-graph-tab to grow horizontally past the viewport. On the profile shared in the issue (https://share.firefox.dev/3RKVQPY) the tab ends up around 15k px wide and gains a horizontal scrollbar.

The change is one CSS line on .filterNavigatorBar in src/components/shared/FilterNavigatorBar.css:

 display: flex;
+ overflow: hidden;
height: 24px;

Items inside the bar already have text-overflow: ellipsis on .filterNavigatorBarItemContent, so clipping at the bar level is the intended behaviour. The pre-existing comment in this file explicitly noted that overflow: hidden was omitted to preserve a fade-out animation on items at the end; that animation has since been removed, so the constraint no longer applies. The comment is updated to describe the current reason for overflow: hidden.

Verification

• yarn ts clean
• yarn lint-css clean (the stylelint order/properties-order rule wants overflow directly after display)
• yarn fmt-check clean
• yarn lint-js clean
• yarn license-check clean
• Targeted tests green: yarn test FilterNavigatorBar|ProfileFilterNavigator|FlameGraph -> 2 suites, 19 tests, 9 snapshots, all pass. Snapshots are unchanged because the React structure is the same; the fix is CSS only.

This is a CSS-only fix, so there is no unit test surface inside Jest. The profile from the issue is the manual verification path: load it into a local dev server before and after the change and observe whether #flame-graph-tab overflows.

Related

• Large amounts of breadcrumbs become unusable #5724 is the original "Large amounts of breadcrumbs become unusable" issue that this change works alongside; this PR specifically targets the parent-expansion side noted in Flame graph: Large number of breadcrumbs expands graph width excessively #6028.

[mstange]

Thank you! I noticed this too recently.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.70%. Comparing base (3d1ca29) to head (cef92f1).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@ Coverage Diff @@## main #6085 +/- ##
=======================================
Coverage 83.70% 83.70% =======================================
Files 337 337 Lines 35575 35575 Branches 9973 9878 -95 =======================================
Hits 29778 29778 Misses 5369 5369 Partials 428 428 

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.