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-contentso the repository blob view is unaffected, per the implementation plan. - Uses a plain
z-index: 5rather than@apply gl-z-5: the GitLab UI z-index scale has no5step (it goes0–4,200,9999), andframework/layout.scssalready usesz-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 |
|---|---|
![]() |
![]() |
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
- Create a snippet with two or more Markdown files, each with several headings.
- Open the snippet, then open the table of contents dropdown on the first file.
- Scroll down so the second file's header reaches the open dropdown.
- Before: the second file's header covers the dropdown. After: the dropdown stays on top and all its entries are visible and clickable.
- 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.

