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 from layouts/nav/_classification_level_banner.html.haml.
  • The actions container (.panel-header-inner-actions :is(.gl-badge, .gl-button)): keeps the nested match that PanelActionsPortal needs, 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

  1. Enable the flag: Feature.enable(:page_breadcrumbs_in_top_bar).
  2. 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.
  3. Open a merge request. The panel header actions still appear.
  4. 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.

Merge request reports

Loading
Loading