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

@@ -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;