Fix playlist card text overflow on Spotify V1.2.34

Bergbok · Apr 6, 2024 · ff22159 · ff22159
1 parent cb63ca7
commit ff22159
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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>