From 2d0d756e855e65e7235a86067b7e695b4ce6fc0f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 19 Aug 2020 11:06:58 +0200
Subject: Fix responsive playlist elements

---
 .../my-account-video-playlist-elements.component.scss     | 15 +++++++++++++++
 .../video-playlist-element-miniature.component.scss       |  9 +++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

(limited to 'client/src/app')

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;
       }
     }
 
-- 
cgit v1.2.3