Merge branch 'rmistry-zindex-design-management-issue' into 'master'

Revert z-index from design management to show comment modal

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149750



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Jannik Lehmann <jlehmann@gitlab.com>
Co-authored-by: Rajan Mistry <rmistry@gitlab.com>

app/assets/stylesheets/page_bundles/design_management.scss

@@ -3,7 +3,6 @@
 $design-pin-diameter: 28px;
 $design-pin-diameter-sm: 24px;
 $t-gray-a-16-design-pin: rgba($black, 0.16);
-$zindex-design-detail: 1061;
 
 .design-card-header {
   background: transparent;
@@ -15,7 +14,6 @@ $zindex-design-detail: 1061;
 
 .design-detail {
   bottom: $calc-application-footer-height;
-  z-index: $zindex-design-detail;
 
   .comment-indicator {
     border-radius: 50%;

ee/app/assets/javascripts/ai/components/global_callout/duo_chat_callout.vue

@@ -122,8 +122,12 @@ export default {
   </user-callout-dismisser>
 </template>
 <style lang="scss">
-.duo-chat-callout-popover.bs-popover-bottom > .arrow::after {
-  border-bottom-color: #c4bae2;
-  top: 1px;
+.duo-chat-callout-popover {
+  z-index: 1001;
+
+  &.bs-popover-bottom > .arrow::after {
+    border-bottom-color: #c4bae2;
+    top: 1px;
+  }
 }
 </style>