Stop breadcrumb overflow toggle from showing hidden panel header
What does this MR do and why?
Follow-up to !254742 (merged), addressing !254742 (comment 3941068440).
!254742 (merged) broadened the :has() rule on .panel-header-inner.without-breadcrumbs in app/assets/stylesheets/layouts/panel.scss from direct children (:has(> :is(.gl-badge, .gl-button))) to any descendant (:has(.gl-badge, .gl-button)). The breadcrumbs partial is always rendered inside the hidden header. While it measures, GlBreadcrumb renders its "…" overflow toggle, a .gl-button, and the broadened rule matches it. The header then shows, the breadcrumbs fit, the toggle goes away, and the header hides again. This loop happens whenever page_breadcrumbs_in_top_bar is enabled, which makes feature specs flaky (https://gitlab.com/gitlab-org/quality/test-failure-issues/-/work_items/44876).
This MR scopes the rule to:
- Direct children (
> :is(.gl-badge, .gl-button)): keeps the previous behavior, for example the external authorization classification badge fromlayouts/nav/_classification_level_banner.html.haml. - The actions container (
.panel-header-inner-actions :is(.gl-badge, .gl-button)): keeps the nested match thatPanelActionsPortalneeds, which pages like the job page (!258490 (merged)) rely on when they don't set@force_show_panel_header.
Buttons inside the breadcrumbs no longer cause the header to show.
How to set up and validate locally
- Enable the flag:
Feature.enable(:page_breadcrumbs_in_top_bar). - Open a page that doesn't set
@force_show_panel_header, for example a project's merge request list. The top edge of the panel no longer flickers, and the header stays hidden. - Open a merge request. The panel header actions still appear.
- Optionally, with !258490 (merged) applied, open a job page. The portal actions still show the header.
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.