Keep snippet table of contents dropdown above later file headers

What does this MR do and why?

In a snippet with several files, opening a file's table of contents dropdown and scrolling lets the next file's header paint over the dropdown, hiding its entries.

Snippet file headers (blob_header.vue) are sibling sticky elements that all use gl-z-4 (--gl-zindex-4: 4), so a later header wins the stacking order over the earlier header's dropdown. This raises a snippet file header to z-index: 5 only while one of its dropdowns is open, using the :has(button[aria-expanded='true']) pattern already used for sticky diff file headers in components/rapid_diffs/diff_file_component.scss. CSS only, no JS changes.

  • Scoped to .snippet-file-content so the repository blob view is unaffected, per the implementation plan.
  • Uses a plain z-index: 5 rather than @apply gl-z-5: the GitLab UI z-index scale has no 5 step (it goes 0–4, 200, 9999), and framework/layout.scss already uses z-index: 5.
  • When the dropdown closes, the header goes back to gl-z-4.

This revives the approach from !247116 (closed) by @ray.tien0907, which was closed as stale while waiting for screenshots; they are credited as co-author on the commit.

References

Closes #604294 (closed)

Related to !247116 (closed).

Screenshots or screen recordings

Multi-file snippet, table of contents open on the first file, scrolled so the second file's header reaches the dropdown:

Before After
snippet-toc-before snippet-toc-after

Note on how these were captured: I don't have a GDK available on my machine, so both screenshots are from a private multi-file snippet on GitLab.com. "Before" is the current behavior; "After" is the same page with this MR's exact rule injected (.snippet-file-content .file-title-flex-parent:has(button[aria-expanded='true']) { z-index: 5; }). With it, the header with the open dropdown computes to z-index: 5 and the next header stays at 4; after closing the dropdown both are back to 4. Happy to re-validate in GDK or add a recording if you'd prefer.

How to set up and validate locally

  1. Create a snippet with two or more Markdown files, each with several headings.
  2. Open the snippet, then open the table of contents dropdown on the first file.
  3. Scroll down so the second file's header reaches the open dropdown.
  4. Before: the second file's header covers the dropdown. After: the dropdown stays on top and all its entries are visible and clickable.
  5. Close the dropdown and scroll: file headers stack as before.

stylelint reports no new warnings for app/assets/stylesheets/framework/files.scss, and Prettier is clean.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Merge request reports

Loading
Loading