From 4c90a87f5b6f6a2e3b39210968bc8e2a8e58aff5 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Fri, 9 Nov 2018 12:18:44 +0100
Subject: [PATCH] Fixed issue #2330 - selecting the overviews on the I Pad does
 not work.

Dropdown menus should have been on top of their backdrop because when the dropdown is triggered via the button the backdrop is inserted before after the button and before the dropdown menu. So the backdrop is behind the menu in the DOM and they could be on the same z-index but the menu would still be in front of the backdrop because of the order.

When triggering the dropdown via javascript the backdrop gets inserted behind the backdrop. Now the backdrop is overlaying the dropdown menu making its items unclickable. This only happens on touch devices because only there the backdrop gets inserted.

Change: we increase the z-index of the dropdown menu (lvl 5 to lvl 6) to be always on top of the backdrop, no matter how the elements are ordered. At the same time we increased the z-index of the elements laying on z-index lvl 6 to lvl7 which was previousely unused. This applies to the global search, modal clues and popovers.
---
 app/assets/stylesheets/zammad.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index c31177b3a..0e493522e 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -2017,7 +2017,7 @@ input.has-error {
 }
 
 .selected-clue {
-  @extend .zIndex-6;
+  @extend .zIndex-7;
   pointer-events: none;
 }
 
@@ -3591,7 +3591,7 @@ footer {
     }
 
   .global-search-menu {
-    @extend .zIndex-6;
+    @extend .zIndex-7;
     background: #26272e;
     position: absolute;
     left: 0;
@@ -4120,7 +4120,7 @@ footer {
 }
 
 .popover {
-  @extend .zIndex-6;
+  @extend .zIndex-7;
   position: absolute;
   font-family: inherit;
   width: 372px;
@@ -6578,11 +6578,11 @@ footer {
 
 .dropdown-backdrop {
   position: fixed;
-  @extend .zIndex-5; // has to be behind dropdown-menu (dropdown-menu is also zIndex-5 but behind dropdown-backdrop in dom)
+  @extend .zIndex-5; // has to be behind dropdown-menu
 }
 
 .dropdown-menu {
-  @extend .zIndex-5; // has to be behind modal windows and beneath notifications (popover)
+  @extend .zIndex-6; // has to be behind modal windows and beneath notifications (popover)
   position: absolute;
   margin: 0;
   padding: 0;