Z-Index Conflict on MR Changes Page with GLDisclosureDropdown Component
There is a Z-index issue on the Merge Request (MR) Changes page when used in combination with the GLDisclosureDropdown
component. This issue is evident as each displayed file seems to create its own stacking context. Consequently, in cases where an overlapping element is required between multiple files, the desired overlap does not occur as expected. This happens even though the element intended to be on top has a higher z-index value than the one supposed to be below.
Screenshot |
---|
How to set up and validate locally
- Enable
sast_reports_in_inline_diff
- Make sure your running an ultimate license or your GDK (how to)
- Clone this repo: https://gitlab.com/jannik_lehmann/sast-inline-findings-example
- Recreate this MR (exactly this MR since it's a UI edgecase) for SAST & CodeQuality findings: jannik_lehmann/cq-and-sast-test!5 (diffs)
- Let the pipeline finish and the go checkout the diff page.
Reproducable on Prod(flag enabled for this Project): jannik_lehmann/cq-and-sast-test!5 (diffs)
Frontend Pairing session around this Issue: https://www.youtube.com/watch?v=xvMwjAJo8BI
Problem to solve:
- Elements overlap incorrectly, even though the z-index values are appropriately aligned.
- Each file on the MR Changes page has a unique stacking context, causing the file to overlap the dropdown regardless of the z-index of the two involved elements.
Potential Solution:
- Work around the stacking context behaviour by ensuring that the popover DOM nodes are placed outside of the file-container DOM Node, thus not subject to the same stacking context. This approach may require updates in the GitLab UI component or its dependencies.
Demo DOM Manipulation |
---|
2023-11-24_13-34-08 |
Implementation Plan
-
Add PortalVue dependency to GitLabUIUpdate: this dependency already exists.😐 - Implement an option to relocate the dropdown content to
document.body
in base_dropdown.vue.
Edited by Jannik Lehmann