From 13e18a8aa762334632340699c342756887dfdc73 Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Fri, 14 Jul 2023 07:23:00 -0400
Subject: [PATCH] Improve responsiveness in playlist sidebar when one word
 channel names are long (#3772)

* Wrap long one word channel names in `infoLine`

* Set height of playlist section to auto on small devices to prevent overflow

* Center videoThumbnail in playlist sidebar to visually be the same as playlist view

* Move CSS changes closer together
---
 src/renderer/scss-partials/_ft-list-item.scss |  1 +
 src/renderer/views/Watch/Watch.scss           | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 9e55f32c9..c3bb46f9a 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -228,6 +228,7 @@ $watched-transition-duration: 0.5s;
       font-size: 14px;
       grid-area: infoLine;
       margin-top: 5px;
+      overflow-wrap: anywhere;
 
       @include is-sidebar-item {
         font-size: 12px;
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 39948490e..90e5360a4 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -113,6 +113,16 @@
     height: 500px;
   }
 
+  .watchVideoPlaylist {
+    :deep(.videoThumbnail) {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+    @media (max-width: 768px) {
+      height: auto;
+    }
+  }
+
   .watchVideoRecommendations,
   .theatreRecommendations {
     margin: 0 0 16px;