Fix responsive playlist elements

2 files changed, 22 insertions, 2 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 13a4b0074..de7e1993f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -65,4 +65,19 @@
     padding-top: 20px;
     margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
   }
+
+  .playlist-elements {
+    padding: 0 !important;
+  }
+
+  ::ng-deep my-video-playlist-element-miniature {
+
+    .video {
+      padding: 5px !important;
+    }
+
+    .position {
+      margin-right: 5px !important;
+    }
+  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index afd775b25..082a5d9b2 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -22,12 +22,16 @@ my-video-thumbnail,
 }
 
 .video {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
   background-color: pvar(--mainBackgroundColor);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
+  .more {
+    display: flex;
+  }
+
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
 
@@ -164,6 +168,7 @@ my-video-thumbnail,
       my-edit-button {
         display: inline-flex;
         height: max-content;
+        margin: auto;
       }
     }