From 7640a93ec96819f9b1380b62bf32443a7258da2c Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Sun, 29 Jan 2023 21:02:08 -0500
Subject: [PATCH] Reduce overflow in playlist view (#3123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Prevent overflow on playlist view on small 📱displays

* Prevent transition of width on `.thumbnailImage`

* Expand styles to be responsive at more widths
---
 src/renderer/scss-partials/_ft-list-item.scss |  2 +-
 src/renderer/views/Playlist/Playlist.css      | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index ce5236e1d..0c2753920 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -61,7 +61,7 @@ $watched-transition-duration: 0.5s;
 
     .thumbnailImage {
       opacity: 0.3;
-      transition-duration: $watched-transition-duration;
+      transition: opacity $watched-transition-duration;
     }
 
     &:hover .thumbnailImage,
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index b8318e382..f762bfc71 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -39,6 +39,15 @@
   max-height: 7vh;
 }
 
+:deep(.videoThumbnail) {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+:deep(.thumbnailImage) {
+  max-width: 25vw;
+}
+
 @media only screen and (max-width: 850px) {
   .routerView {
     flex-direction: column;
@@ -56,4 +65,8 @@
     box-sizing: border-box;
     width: 100%;
   }
+
+  :deep(.thumbnailImage) {
+    max-width: 35vw;
+  }
 }