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 = '';
const trackImageHTML = showCover ? `
` : '';
@@ -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;