1 files changed, 86 insertions, 2 deletions

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 4d9d249d9..4fba2344b 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -88,12 +88,15 @@ my-video-thumbnail,
     @include ellipsis;
   }
 
-  .more {
+  .more, my-edit-button {
     justify-self: flex-end;
     margin-left: auto;
     cursor: pointer;
-    opacity: 0;
     min-width: 24px;
+  }
+
+  .more {
+    opacity: 0;
 
     &.show {
       opacity: 1;
@@ -132,3 +135,84 @@ my-video-thumbnail,
     }
   }
 }
+
+@mixin more-dropdown-control {
+  .video {
+    my-edit-button {
+      display: none;
+
+      + .more {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+@mixin edit-button-control {
+  .video {
+    my-edit-button {
+      display: none;
+    }
+
+    &.playing {
+      my-edit-button {
+        display: inline-flex;
+        height: max-content;
+      }
+    }
+
+    my-edit-button + .more {
+      display: none;
+    }
+  }
+}
+
+@mixin edit-button-in-mobile-view {
+  .video {
+    my-edit-button {
+      ::ng-deep .action-button-edit {
+        padding: 0 13px;
+
+        .button-label {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  :host-context(.expanded) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  :host-context(.expanded) {
+    @include edit-button-in-mobile-view();
+  }
+}
+
+@media screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-in-mobile-view();
+  }
+}