From ff22159dd2fed58357082196542fdd194facf0e4 Mon Sep 17 00:00:00 2001
From: Bergbok <66174189+Bergbok@users.noreply.github.com>
Date: Sat, 6 Apr 2024 18:50:49 +0200
Subject: [PATCH] Fix playlist card text overflow on Spotify V1.2.34

---
 CustomApps/playlist-tags/package.json         |  2 +-
 .../src/components/spotify_card.tsx           | 25 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/CustomApps/playlist-tags/package.json b/CustomApps/playlist-tags/package.json
index 76f6111..09c4a57 100644
--- a/CustomApps/playlist-tags/package.json
+++ b/CustomApps/playlist-tags/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playlist-tags",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "private": true,
   "scripts": {
     "build": "spicetify-creator",
diff --git a/CustomApps/playlist-tags/src/components/spotify_card.tsx b/CustomApps/playlist-tags/src/components/spotify_card.tsx
index 6696188..e31d050 100644
--- a/CustomApps/playlist-tags/src/components/spotify_card.tsx
+++ b/CustomApps/playlist-tags/src/components/spotify_card.tsx
@@ -70,12 +70,25 @@ function SpotifyCard(props: SpotifyCardProps): React.ReactElement<HTMLDivElement
                             isCircular={type === "artist"}/>
                     )}
                     renderSubHeaderContent={() => (
-                        <TextComponent 
-                            as="div" 
-                            variant="mesto" 
-                            semanticColor="textSubdued" 
-                            children={he.decode(subheader)} 
-                            style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}/>
+                        <React.Fragment>
+                            <style>
+                            {`
+                                .playlist-text {
+                                    width: 169px;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    overflow-wrap: break-word;
+                                }
+                            `}
+                            </style>
+                            <TextComponent 
+                                as="div" 
+                                variant="mesto" 
+                                semanticColor="textSubdued" 
+                                children={he.decode(subheader)}
+                                className="playlist-text"/>
+                        </React.Fragment>
                     )}
                     uri={uri}/>
             </ContextMenu>