Fix long title edge cases for playlist grid and list views

kommunarr · Jun 20, 2024 · 7d23aac · 7d23aac
1 parent 7c07d47
commit 7d23aac
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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,14 +62,16 @@
     .playlistItemsCard {
       margin-block: 0 60px;
       margin-inline: auto;
+      inline-size: 100%;
+      box-sizing: border-box;
     }
   }
 
   &.list {
     .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
@@ -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"