From c220e8585c95eaa3c2ad26ff1ba97f6a879b5c25 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Thu, 1 Jan 2026 22:58:20 +0100
Subject: [PATCH] IMP: display of playlists on mobile

---
 index.html |  21 +++++-----
 styles.css | 119 +----------------------------------------------------
 2 files changed, 11 insertions(+), 129 deletions(-)

diff --git a/index.html b/index.html
index d47827b..6583044 100644
--- a/index.html
+++ b/index.html
@@ -282,17 +282,16 @@
             </div>
 
             <section id="page-playlist" class="page">
-                <div class="detail-header">
-                    <img id="playlist-detail-image" class="detail-cover" alt="Playlist Cover">
+                <header class="detail-header">
+                    <img id="playlist-detail-image" class="detail-header-image" alt="Playlist Cover">
                     <div class="detail-header-info">
                         <h1 class="title" id="playlist-detail-title"></h1>
-                        <p class="meta" id="playlist-detail-meta"></p>
+                        <div class="meta" id="playlist-detail-meta"></div>
                         <p id="playlist-detail-description" class="detail-description"></p>
-                        <div class="detail-actions">
+                        <div class="detail-header-actions">
                             <button id="play-playlist-btn" class="btn-primary">
                                 <span>Play</span>
                             </button>
-                            <!-- Like button not typically for own playlists, but good for "followed" ones if we support that. For now, maybe skip or add "Edit" if it's user playlist -->
                             <button id="download-playlist-btn" class="btn-primary">
                                 <span>Download</span>
                             </button>
@@ -301,24 +300,24 @@
                             </button>
                         </div>
                     </div>
-                </div>
+                </header>
                 <div id="playlist-detail-tracklist" class="track-list"></div>
             </section>
 
             <section id="page-mix" class="page">
-                <div class="detail-header">
-                    <img id="mix-detail-image" class="detail-cover" alt="Mix Cover">
+                <header class="detail-header">
+                    <img id="mix-detail-image" class="detail-header-image" alt="Mix Cover">
                     <div class="detail-header-info">
                         <h1 class="title" id="mix-detail-title"></h1>
-                        <p class="meta" id="mix-detail-meta"></p>
+                        <div class="meta" id="mix-detail-meta"></div>
                         <p id="mix-detail-description" class="detail-description"></p>
-                        <div class="detail-actions">
+                        <div class="detail-header-actions">
                             <button id="play-mix-btn" class="btn-primary">
                                 <span>Play</span>
                             </button>
                         </div>
                     </div>
-                </div>
+                </header>
                 <div id="mix-detail-tracklist" class="track-list"></div>
             </section>
 
diff --git a/styles.css b/styles.css
index 2f1dbd2..8b96787 100644
--- a/styles.css
+++ b/styles.css
@@ -3061,56 +3061,6 @@ input:checked + .slider::before {
     opacity: 1;
 }
 
-#page-playlist .detail-header,
-#page-mix .detail-header {
-    display: flex;
-    align-items: flex-top;
-    gap: var(--spacing-xl);
-    margin-bottom: var(--spacing-lg);
-    padding-bottom: var(--spacing-md);
-}
-
-#page-playlist .detail-cover,
-#page-mix .detail-cover {
-    width: 200px;
-    height: 200px;
-    flex-shrink: 0;
-    background-color: var(--muted);
-    border-radius: var(--radius);
-    object-fit: cover;
-    box-shadow: var(--shadow-lg);
-    transition: opacity 0.3s ease-in-out;
-}
-
-#playlist-detail-image.loading,
-#mix-detail-image.loading {
-    opacity: 0.3;
-}
-
-
-#playlist-detail-title,
-#mix-detail-title {
-    font-size: 3rem;
-    font-weight: 800;
-    line-height: 1.1;
-    margin-bottom: 0.5rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-#playlist-detail-meta,
-#mix-detail-meta {
-    color: var(--muted-foreground);
-    font-size: 0.95rem;
-    margin-bottom: 0.75rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
 #playlist-detail-description,
 #mix-detail-description {
     color: var(--foreground);
@@ -3120,48 +3070,6 @@ input:checked + .slider::before {
     max-width: 600px;
 }
 
-#page-playlist .detail-actions,
-#page-mix .detail-actions {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1.5rem;
-    flex-wrap: wrap;
-}
-
-#play-playlist-btn,
-#download-playlist-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.875rem 1.75rem;
-    border: none;
-    border-radius: 2rem;
-    font-weight: 600;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: all var(--transition);
-    box-shadow: var(--shadow-sm);
-}
-
-#play-playlist-btn:hover,
-#download-playlist-btn:hover {
-    transform: scale(1.05);
-    box-shadow: var(--shadow-md);
-}
-
-#play-playlist-btn:disabled,
-#download-playlist-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
-}
-
-#play-playlist-btn svg,
-#download-playlist-btn svg {
-    flex-shrink: 0;
-}
-
 #playlist-detail-tracklist {
     display: flex;
     flex-direction: column;
@@ -3185,32 +3093,7 @@ input:checked + .slider::before {
 }
 
 @media (max-width: 768px) {
-    #page-playlist .detail-header,
-    #page-mix .detail-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--spacing-lg);
-        padding-bottom: var(--spacing-md);
-        margin-bottom: var(--spacing-lg);
-    }
-
-    #playlist-detail-image,
-    #mix-detail-image {
-        width: 150px;
-        height: 150px;
-    }
-
-    #playlist-detail-title,
-    #mix-detail-title {
-        font-size: 2rem;
-        line-height: 1.2;
-    }
-
-    #playlist-detail-meta,
-    #mix-detail-meta {
-        font-size: 0.85rem;
-    }
-}
+    /* ... existing generic rules ... */
 
 @media (max-width: 480px) {
     #playlist-detail-title {