Skip to content

Revert z-index from design management to show comment modal

Rajan Mistry requested to merge rmistry-zindex-design-management-issue into master

What does this MR do and why?

Due to z-index addition from !148434 (merged), the delete comment modal in design management is not visible.

This MR

  • reverts the z-index applied on design management view
  • adds z-index to GitLab Duo Chat popover at same level as the dropdown i.e. 300

Currently, the z-index are set to following levels

  • Design Management page - 1061
  • GitLab Duo Chat popover - 1060
  • Confirmation Modal - 1040

Due to this, the delete confirmation modal is appearing below design management page. Earlier it was appearing above because the design management has fixed-top css utility which has z-index set to 1030.

On overriding the z-index using dropdown level z-index from stylesheets/utilities.scss#L78, the popover, design management page and modal is appearing properly.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Screen Recording 2024-04-16 at 9.45.56 PM.mov Screen Recording 2024-04-16 at 10.03.22 PM.mov

How to set up and validate locally

Steps to verify:

  1. Login with any user
  2. Go to any Project > Issues > List
  3. Create an new Issue and upload a design in it
  4. Open the design and comment on it
  5. Click on the kebab menu of the comment and try to delete the comment
  6. The delete comment confirmation should appear
Edited by Rajan Mistry

Merge request reports