From aae15bcf4d48b0c23b9b8df6ba3c31713386cb7a Mon Sep 17 00:00:00 2001
From: Bola Ahmed Buari <bb@zammad.com>
Date: Wed, 2 Mar 2022 09:41:00 +0100
Subject: [PATCH] Fixes #3974 - Modal backdrop not covering some UI parts.

---
 app/assets/stylesheets/bootstrap.css |  1 +
 app/assets/stylesheets/zammad.scss   | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css
index c8e331abe..c7879e0fe 100644
--- a/app/assets/stylesheets/bootstrap.css
+++ b/app/assets/stylesheets/bootstrap.css
@@ -4066,6 +4066,7 @@ button.close {
   right: 0;
   left: 0;
   bottom: 0;
+  z-index: 1000;
   background-color: #000;
 }
 .modal-backdrop.fade {
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 45b098305..95f6a2d39 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -2681,6 +2681,8 @@ input.has-error {
     position: absolute;
     opacity: 0;
     padding: 18px;
+
+    @extend .zIndex-11;
   }
 
   .modal-arrow {
@@ -8487,7 +8489,7 @@ a.list-group-item.active > .badge,
 
 /* allow/show autocomplete in modal dialog */
 .ui-autocomplete.ui-widget-content {
-  @extend .zIndex-9;
+  @extend .zIndex-11;
 
   position: absolute;
   max-height: 380px;
@@ -8665,7 +8667,7 @@ a.list-group-item.active > .badge,
 }
 
 .modal {
-  @extend .zIndex-10;
+  @extend .zIndex-11;
 
   &-loader {
     text-align: center;
@@ -8679,6 +8681,8 @@ a.list-group-item.active > .badge,
   margin-top: 35px;
   margin-bottom: 35px;
 
+  @extend .zIndex-11;
+
   @include phone {
     max-width: calc(100vw - 20px) !important;
     margin: 10px;
@@ -8807,7 +8811,7 @@ a.list-group-item.active > .badge,
   display: block;
   padding: 0 40px;
 
-  @extend .zIndex-9;
+  @extend .zIndex-11;
 
   @include bidi-style(padding-left, 40px, padding-right, 0);