From ade89637ad0c163df995d32605808db10ed6a670 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Thu, 25 Dec 2025 12:28:59 +0100
Subject: [PATCH] more fixed for mobile, added artist tags

---
 js/ui.js   | 10 +++++++++-
 styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index ad39f6e..7a33729 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -693,7 +693,15 @@ async renderPlaylistPage(playlistId) {
 
             this.adjustTitleFontSize(nameEl, artist.name);
 
-            metaEl.textContent = `${artist.popularity} popularity`;
+            metaEl.innerHTML = `
+                <span>${artist.popularity} popularity</span>
+                <div class="artist-tags">
+                    ${(artist.artistRoles || [])
+                        .filter(role => role.category)
+                        .map(role => `<span class="artist-tag">${role.category}</span>`)
+                        .join('')}
+                </div>
+            `;
 
             this.renderListWithTracks(tracksContainer, artist.tracks, true);
             albumsContainer.innerHTML = artist.albums.map(album =>
diff --git a/styles.css b/styles.css
index 3507e0c..29bb48e 100644
--- a/styles.css
+++ b/styles.css
@@ -771,7 +771,7 @@ body.has-page-background .track-item:hover {
 
 .detail-header {
     display: flex;
-    align-items: flex-end;
+    align-items: flex-start;
     gap: var(--spacing-xl);
     margin-bottom: var(--spacing-lg);
     padding-bottom: var(--spacing-md);
@@ -820,6 +820,23 @@ body.has-page-background .track-item:hover {
     font-size: 1.75rem;
 }
 
+.artist-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-left: 1rem;
+}
+
+.artist-tag {
+    background-color: var(--secondary);
+    color: var(--muted-foreground);
+    padding: 0.15rem 0.6rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: capitalize;
+}
+
 .detail-header-info .meta {
     color: var(--muted-foreground);
     margin-top: 1rem;
@@ -2219,9 +2236,19 @@ input:checked + .slider::before {
         gap: 0.35rem;
     }
 
-    .detail-header-actions,
-    .btn-primary {
-        width: 100%;
+    .detail-header-actions {
+        width: auto;
+    }
+
+    .detail-header-actions .btn-primary {
+        width: auto;
+        padding: 0.875rem;
+        border-radius: 50%;
+        aspect-ratio: 1/1;
+    }
+
+    .detail-header-actions .btn-primary span {
+        display: none;
     }
 
     .now-playing-bar {
@@ -3028,13 +3055,21 @@ input:checked + .slider::before {
     }
 
     #page-playlist .detail-actions {
-        width: 100%;
-        flex-direction: column;
+        width: auto;
+        flex-direction: row;
     }
 
     #play-playlist-btn,
     #download-playlist-btn {
-        width: 100%;
+        width: auto;
+        padding: 0.875rem;
+        border-radius: 50%;
+        aspect-ratio: 1/1;
+    }
+
+    #play-playlist-btn span,
+    #download-playlist-btn span {
+        display: none;
     }
 }