From ed2d9425eb203d8121d5203128c572bc228ff35a Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Tue, 23 Dec 2025 12:50:53 +0100
Subject: [PATCH] UI: dynamically adjust title font size based on length

---
 js/ui.js   | 16 ++++++++++++++++
 styles.css | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/js/ui.js b/js/ui.js
index 8cbbf7b..d3474cf 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -23,6 +23,15 @@ export class UIRenderer {
         `;
     }
 
+    adjustTitleFontSize(element, text) {
+        element.classList.remove('long-title', 'very-long-title');
+        if (text.length > 40) {
+            element.classList.add('very-long-title');
+        } else if (text.length > 25) {
+            element.classList.add('long-title');
+        }
+    }
+
     createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
         const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
         const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
@@ -299,6 +308,8 @@ export class UIRenderer {
             const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
             titleEl.innerHTML = `${album.title} ${explicitBadge}`;
 
+            this.adjustTitleFontSize(titleEl, album.title);
+
             const totalDuration = calculateTotalDuration(tracks);
             let dateDisplay = '';
             if (album.releaseDate) {
@@ -378,6 +389,8 @@ async renderPlaylistPage(playlistId) {
 
         titleEl.textContent = playlist.title;
 
+        this.adjustTitleFontSize(titleEl, playlist.title);
+
         const totalDuration = calculateTotalDuration(tracks);
 
         metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`;
@@ -423,6 +436,9 @@ async renderPlaylistPage(playlistId) {
             imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
             imageEl.style.backgroundColor = '';
             nameEl.textContent = artist.name;
+
+            this.adjustTitleFontSize(nameEl, artist.name);
+
             metaEl.textContent = `${artist.popularity} popularity`;
 
             this.renderListWithTracks(tracksContainer, artist.tracks, true);
diff --git a/styles.css b/styles.css
index 06391e7..2968e44 100644
--- a/styles.css
+++ b/styles.css
@@ -131,7 +131,7 @@
     --highlight: #2563eb;
     --highlight-rgb: 37, 99, 235;
     --active-highlight: var(--highlight);
-    --explicit-badge: #000000;
+    --explicit-badge: #ef4444;
     --explicit-badge-foreground: #ffffff;
 }
 
@@ -702,6 +702,15 @@ kbd {
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
+    word-break: break-word;
+}
+
+.detail-header-info .title.long-title {
+    font-size: 2.5rem;
+}
+
+.detail-header-info .title.very-long-title {
+    font-size: 1.75rem;
 }
 
 .detail-header-info .meta {
@@ -1837,6 +1846,14 @@ input:checked + .slider::before {
         font-size: 3rem;
     }
 
+    .detail-header-info .title.long-title {
+        font-size: 2rem;
+    }
+
+    .detail-header-info .title.very-long-title {
+        font-size: 1.35rem;
+    }
+
     .main-content {
         padding: var(--spacing-lg);
     }
@@ -1921,6 +1938,14 @@ input:checked + .slider::before {
         line-height: 1.2;
     }
 
+    .detail-header-info .title.long-title {
+        font-size: 1.5rem;
+    }
+
+    .detail-header-info .title.very-long-title {
+        font-size: 1.25rem;
+    }
+
     .detail-header-info .meta {
         font-size: 0.85rem;
         gap: 0.35rem;
@@ -2157,6 +2182,14 @@ input:checked + .slider::before {
         font-size: 1.75rem;
     }
 
+    .detail-header-info .title.long-title {
+        font-size: 1.35rem;
+    }
+
+    .detail-header-info .title.very-long-title {
+        font-size: 1.1rem;
+    }
+
     .search-tab {
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: 0.9rem;