Fix dropdown menu overflow

3 files changed, 8 insertions, 6 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index a21042f09..affbd4793 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -12,10 +12,10 @@
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
     <div ngbDropdown class="d-inline-block ml-4">
-      <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
+      <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
-      <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
+      <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
         <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
         <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
       </div>
@@ -72,7 +72,7 @@
         >
           <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
             <span class="glyphicon glyphicon-menu-down"></span>
-  
+
             <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
             <ng-template #hasAuthorComments>
               <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
@@ -83,7 +83,7 @@
               </ng-template>
             </ng-template>
             <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
-  
+
             <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
           </div>
         </my-video-comment>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 5ed1ac629..df42fae73 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -21,7 +21,7 @@
   .title-page {
     margin-right: 0;
   }
-  
+
   my-feed {
     display: inline-block;
     margin-left: 5px;
@@ -33,7 +33,7 @@
   }
 }
 
-#dropdownSortComments {
+#dropdown-sort-comments {
   font-weight: 600;
   text-transform: uppercase;
   border: none;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index cb266cc68..7985472ed 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -37,6 +37,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .dropdown-menu {
+  z-index: z(dropdown) + 1 !important;
+
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;