IMP: html/css

index.html

@@ -293,7 +293,7 @@
                     <div class="detail-header-info">
                         <h1 class="title" id="playlist-detail-title"></h1>
                         <div class="meta" id="playlist-detail-meta"></div>
-                        <p id="playlist-detail-description" class="detail-description"></p>
+                        <div class="meta" id="playlist-detail-description" class="detail-description"></div>
                         <div class="detail-header-actions">
                             <button id="play-playlist-btn" class="btn-primary">
                             <span>Play</span>
@@ -316,11 +316,14 @@
                     <div class="detail-header-info">
                         <h1 class="title" id="mix-detail-title"></h1>
                         <div class="meta" id="mix-detail-meta"></div>
-                        <p id="mix-detail-description" class="detail-description"></p>
+                        <div class="meta" id="mix-detail-description" class="detail-description"></div>
                         <div class="detail-header-actions">
                             <button id="play-mix-btn" class="btn-primary">
                             <span>Play</span>
                             </button>
+                            <button id="download-mix-btn" class="btn-primary">
+                            <span>Download</span>
+                            </button>
                         </div>
                     </div>
                 </header>
@@ -596,7 +599,7 @@
                         Monochrome is a lightweight, privacy-focused music streaming client designed for high-fidelity audio playback. 
                         Built with modern web technologies, it provides a clean, distraction-free listening experience.
                         <br>
-                        <h3><strong>NOTE:</strong> The instance you are currently on (monochrome.samidy.com) is a Community Fork adding additional features (library/playlists, accounts, mix + Big UI Improvments & More).</h3>
+                        <strong>NOTE:</strong> The instance you are currently on (monochrome.samidy.com) is a Community Fork adding additional features (library/playlists, accounts, mix + Big UI Improvments & More).
                         <strong>I Am Not Affiliated With The Original owner.</strong>
                     </p>
                     <br>

js/app.js

@@ -325,6 +325,30 @@ document.addEventListener('DOMContentLoaded', async () => {
                 alert('Failed to play album: ' + error.message);
             }
         }
+        if (e.target.closest('#download-mix-btn')) {
+            const btn = e.target.closest('#download-mix-btn');
+            if (btn.disabled) return;
+
+            const param = window.location.hash.split('#mix/')[1];
+            if (!param) return;
+            const [mixId] = param.split('?');
+
+            btn.disabled = true;
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
+
+            try {
+                const { mix, tracks } = await api.getMix(mixId);
+                await downloadPlaylistAsZip(mix, tracks, api, player.quality, lyricsManager);
+            } catch (error) {
+                console.error('Mix download failed:', error);
+                alert('Failed to download mix: ' + error.message);
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = originalHTML;
+            }
+        }
+
         if (e.target.closest('#download-playlist-btn')) {
         const btn = e.target.closest('#download-playlist-btn');
         if (btn.disabled) return;

js/ui.js

@@ -1185,6 +1185,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
         const tracklistContainer = document.getElementById('mix-detail-tracklist');
         const playBtn = document.getElementById('play-mix-btn');
         if (playBtn) playBtn.innerHTML = `${SVG_PLAY}<span>Play</span>`;
+        const dlBtn = document.getElementById('download-mix-btn');
+        if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD}<span>Download</span>`;
 
         // Skeleton loading
         imageEl.src = '';

styles.css

@@ -2401,6 +2401,35 @@ input:checked + .slider::before {
     border-bottom: none;
 }
 
+
+#playlist-detail-description,
+#mix-detail-description {
+    color: var(--foreground);
+    font-size: 0.9rem;
+}
+
+#playlist-detail-tracklist {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+#playlist-detail-tracklist .track-list-header {
+    display: grid;
+    grid-template-columns: 40px 1fr auto;
+    align-items: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-sm);
+    color: var(--muted-foreground);
+    font-size: 0.9rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: var(--spacing-xs);
+}
+
+#playlist-detail-tracklist .track-list-header .duration-header {
+    justify-self: flex-end;
+}
+
 /* Responsive Design */
 @media (max-width: 1024px) {
     .app-container {
@@ -3165,49 +3194,6 @@ input:checked + .slider::before {
     opacity: 1;
 }
 
-#playlist-detail-description,
-#mix-detail-description {
-    color: var(--foreground);
-    font-size: 0.9rem;
-    line-height: 1.6;
-    margin-top: 1rem;
-    max-width: 600px;
-}
-
-#playlist-detail-tracklist {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-#playlist-detail-tracklist .track-list-header {
-    display: grid;
-    grid-template-columns: 40px 1fr auto;
-    align-items: center;
-    gap: var(--spacing-md);
-    padding: var(--spacing-sm);
-    color: var(--muted-foreground);
-    font-size: 0.9rem;
-    border-bottom: 1px solid var(--border);
-    margin-bottom: var(--spacing-xs);
-}
-
-#playlist-detail-tracklist .track-list-header .duration-header {
-    justify-self: flex-end;
-}
-
-@media (max-width: 480px) {
-    #playlist-detail-title {
-        font-size: 1.75rem;
-    }
-}
-
-@media (min-width: 1024px) {
-    #playlist-detail-title {
-        font-size: 4rem;
-    }
-}
-
 /* Window Controls Overlay */
 @media (display-mode: window-controls-overlay) {
     .app-container {