From 7d23aac5910f31c514ee1821a8988a377e655666 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 20 Jun 2024 00:02:19 -0500
Subject: [PATCH] Fix long title edge cases for playlist grid and list views

---
 .../components/ft-auto-grid/ft-auto-grid.css  |  2 +-
 .../playlist-info/playlist-info.scss          | 37 ++++++++++++++++---
 src/renderer/views/Playlist/Playlist.scss     |  9 +++--
 src/renderer/views/Playlist/Playlist.vue      |  4 +-
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.css b/src/renderer/components/ft-auto-grid/ft-auto-grid.css
index 24106e674420..4db337624cc7 100644
--- a/src/renderer/components/ft-auto-grid/ft-auto-grid.css
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.css
@@ -11,7 +11,7 @@
 }
 
 /* Cap grid column width at 5 for larger viewports */
-@media (width >= 1280px) {
+@media (width >= 1475px) {
   .autoGrid {
     grid-template-columns: repeat(5, minmax(262px, 1fr));
   }
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index a429360c0c35..71965ee54af5 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -41,6 +41,17 @@
   }
 }
 
+.playlistTitle, .playlistDescription {
+  inline-size: 100%;
+  margin-block: 8px;
+  max-inline-size: 70vw;
+
+  @media only screen and (width >= 910px) {
+    /* Approximate max size before untruncated title starts breaking list view desktop interface */
+    max-inline-size: 28vw;
+  }
+}
+
 .playlistChannel {
   align-items: center;
   color: inherit;
@@ -96,13 +107,10 @@
   }
 
   .playlistTitle, .playlistDescription {
-    overflow-x: hidden;
     text-align: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-inline-size: 750px;
-    inline-size: 100%;
-    margin-block: 8px;
+
+    /* Approximate max size before untruncated title could break grid view interface */
+    max-inline-size: 50vw;
   }
 
   .descriptionInput {
@@ -126,6 +134,23 @@
   }
 }
 
+/* Only show full untruncated playlist description and title on smaller viewport sizes */
+@media only screen and (width > 680px) {
+  .playlistTitle, .top-bar .playlistDescription {
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+@media only screen and (width <= 680px) {
+  .playlistTitle, .playlistDescription {
+    max-inline-size: 100%;
+  }
+}
+
+
+
 @media only screen and (width <= 1250px) {
   :deep(.sharePlaylistIcon .iconDropdown) {
     inset-inline: auto auto;
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 4fe7a8729735..df799c48ab6e 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -45,7 +45,8 @@
       padding-block: 0;
       margin-inline: auto;
       padding-inline: 16px;
-      box-sizing: content-box;
+      box-sizing: border-box;
+      inline-size: 100%;
       background-color: var(--card-bg-color);
       box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
 
@@ -61,6 +62,8 @@
     .playlistItemsCard {
       margin-block: 0 60px;
       margin-inline: auto;
+      inline-size: 100%;
+      box-sizing: border-box;
     }
   }
 
@@ -68,7 +71,7 @@
     .playlistInfoContainer {
       background-color: var(--card-bg-color);
       block-size: calc(100vh - 132px);
-      inline-size: 30%;
+      min-inline-size: 30%;
       inset-block-start: 96px;
       margin-inline-end: 1em;
       position: sticky;
@@ -131,7 +134,7 @@
   margin-block: auto;
 }
 
-@media only screen and (width <= 850px) {
+@media only screen and (width <= 910px) {
   .routerView {
     flex-direction: column;
 
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index c7e6efb8b30a..68a734065b74 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -7,7 +7,7 @@
       v-if="isLoading"
       :fullscreen="true"
     />
-    <div
+    <ft-card
       v-if="!isLoading"
       class="playlistInfoContainer"
       :class="{
@@ -41,7 +41,7 @@
         @prompt-open="promptOpen = true"
         @prompt-close="promptOpen = false"
       />
-    </div>
+    </ft-card>
 
     <ft-card
       v-if="!isLoading"