From 8da5b45b0fce0dc1a883b5985fa5565244b8c092 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Wed, 19 Nov 2025 09:30:20 +0800
Subject: [PATCH 1/3] ! Fix playlist page width & long playlist name handling

---
 src/renderer/components/PlaylistInfo/PlaylistInfo.scss | 9 +++++++++
 src/renderer/views/Playlist/Playlist.scss              | 6 ++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
index b3d9ebcec6b66..00b78ed40efe2 100644
--- a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
+++ b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
@@ -28,6 +28,15 @@
 .playlistTitle {
   margin-block-end: 0.1em;
   overflow-wrap: break-word;
+
+  @media only screen and (width <= 850px) {
+    // margin-inline-in routerView = 8px x2 = 16px
+    // For unknown reason class `routerView` is in 2 containers
+    // padding for `playlistInfo` is 10px x2 = 20px
+    // Also scrollbar got unknown width so using 95vw instead of 100vw
+    max-inline-size: calc(95vw - 32px - 20px);
+    text-overflow: ellipsis;
+  }
 }
 
 .playlistDescription {
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 6e9d768f4573a..79965e0981878 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -85,10 +85,6 @@
       padding: 10px;
     }
   }
-
-  .playlistPage {
-    inline-size: 85vw;
-  }
 }
 
 
@@ -149,6 +145,8 @@
         inset-block-start: 0;
         block-size: auto;
         inline-size: 100%;
+        // Reset margin
+        margin-inline-end: 0;
       }
 
       .playlistItemsCard {

From 7ebdf274553db9692d9fa7897c7ec348d88d49f1 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 22 Nov 2025 20:59:07 +0800
Subject: [PATCH 2/3] ! Fix layout issue in some widths

Also use `gap` instead of `margin-inline` for spacing
---
 src/renderer/components/ChannelHome/ChannelHome.css    | 9 ++++++++-
 src/renderer/components/PlaylistInfo/PlaylistInfo.scss | 4 +++-
 src/renderer/views/Playlist/Playlist.scss              | 5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ChannelHome/ChannelHome.css b/src/renderer/components/ChannelHome/ChannelHome.css
index 60cc9429d5ee8..696200e3a5e14 100644
--- a/src/renderer/components/ChannelHome/ChannelHome.css
+++ b/src/renderer/components/ChannelHome/ChannelHome.css
@@ -5,7 +5,10 @@
 .shelfTitle {
   font-size: 24px;
   cursor: pointer;
-  overflow-wrap: break-word;
+
+  /* Prevents overflow for long values */
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
 }
 
 .shelfTitle::marker {
@@ -37,4 +40,8 @@
 .shelfSubtitle {
   font-style: italic;
   color: var(--tertiary-text-color);
+
+  /* Prevents overflow for long values */
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
 }
diff --git a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
index 00b78ed40efe2..17d7cf634605e 100644
--- a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
+++ b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
@@ -27,7 +27,9 @@
 
 .playlistTitle {
   margin-block-end: 0.1em;
-  overflow-wrap: break-word;
+
+  /* Prevents overflow for long values */
+  overflow-wrap: anywhere;
 
   @media only screen and (width <= 850px) {
     // margin-inline-in routerView = 8px x2 = 16px
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 79965e0981878..e784d7782493c 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -67,12 +67,13 @@
   }
 
   &.list {
+    gap: 1em;
+
     .playlistInfoContainer {
       background-color: var(--card-bg-color);
       block-size: calc(100vh - 132px);
       inline-size: 30%;
       inset-block-start: 96px;
-      margin-inline-end: 1em;
       position: sticky;
 
       .playlistInfo {
@@ -139,6 +140,8 @@
     flex-direction: column;
 
     &.list {
+      gap: 0;
+
       .playlistInfoContainer {
         box-sizing: border-box;
         position: relative;

From 4b21da66e36efff5daa78008804b1898c8e99544 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 22 Nov 2025 21:06:17 +0800
Subject: [PATCH 3/3] ! Fix layout issue for local playlist in some widths

---
 src/renderer/components/PlaylistInfo/PlaylistInfo.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
index 17d7cf634605e..04c9ffef8b410 100644
--- a/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
+++ b/src/renderer/components/PlaylistInfo/PlaylistInfo.scss
@@ -111,7 +111,6 @@
   .playlistDescription {
     overflow-x: hidden;
     text-align: center;
-    white-space: nowrap;
     text-overflow: ellipsis;
     max-inline-size: 750px;
     inline-size: 100%;