Fix playlist element dropdown overflow

5 files changed, 18 insertions, 17 deletions

diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 87e8b8c70..f8d68e986 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -28,7 +28,7 @@
 .jump-to-suggestions {
   top: 100%;
   left: 0;
-  z-index: z(typeahead);
+  z-index: z('search-typeahead');
   width: 100%;
 }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 473fdc102..87ab68b87 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -38,7 +38,7 @@
 
   <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
 
-  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
        (openChange)="onDropdownOpenChange()" autoClose="outside"
   >
     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 3be8f057b..351676a38 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -161,7 +161,7 @@ code {
 
     &.sub-menu-fixed {
       position: fixed;
-      z-index: #{z('header') - 1};
+      z-index: #{z('sub-menu') - 1};
     }
   }
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 58256a065..259af7a77 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -176,7 +176,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
         content: '';
         display: block;
         position: fixed;
-        z-index: z('header') - 1;
+        z-index: z('menu') - 1;
       }
     }
   }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index a7ad0f643..565f9b512 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -124,19 +124,20 @@ $variables: (
 /*** z-index groups ***/
 
 $zindex: (
-  miniature    :    10,
-  privacymsg   :    20,
-  typeahead    :    30,
-  dropdown     : 12000,
-  header       : 12500,
-  menu         : 12600,
-  popover      : 13000,
-  tooltip      : 14000,
-  loadbar      : 15000,
-  modal        : 16000,
-  help-popover : 17000,
-  notification : 18000,
-  hotkeys      : 19000
+  miniature       :    10,
+  privacymsg      :    20,
+  dropdown        : 12000,
+  sub-menu        : 12500,
+  menu            : 12600,
+  search-typeahead: 12650,
+  header          : 12700,
+  popover         : 13000,
+  tooltip         : 14000,
+  loadbar         : 15000,
+  modal           : 16000,
+  help-popover    : 17000,
+  notification    : 18000,
+  hotkeys         : 19000
 );
 
 @function z($label) {