From 7815051e5db6962b5541f49c4c29d873fb567da0 Mon Sep 17 00:00:00 2001
From: J0Z1L <Github@joel.zingg.link>
Date: Sat, 28 Feb 2026 12:04:21 +0100
Subject: [PATCH] Improve track dialog layout with responsive grid and cleaner
 status alignment

---
 public/app.js     |  10 +++--
 public/styles.css | 101 +++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/public/app.js b/public/app.js
index 9e0b2d5..1364b67 100644
--- a/public/app.js
+++ b/public/app.js
@@ -198,10 +198,12 @@ async function openAlbumDialog(albumId, preselectedTrackNames = [], context = nu
       row.className = 'track-row';
       const isChecked = preselected.size > 0 ? preselected.has(track.name) : true;
       row.innerHTML = `
-        <input type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" />
-        <span>${track.trackNumber}. ${track.name}</span>
-        <small>(${formatDuration(track.durationMs)})</small>
-        ${pill(Boolean(track.exists))}
+        <input class="track-check" type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" />
+        <span class="track-main">
+          <span class="track-title">${track.trackNumber}. ${track.name}</span>
+          <span class="track-meta">${formatDuration(track.durationMs)}</span>
+        </span>
+        <span class="track-status">${pill(Boolean(track.exists))}</span>
       `;
       const input = row.querySelector('input');
       input.addEventListener('change', updateDialogActionButton);
diff --git a/public/styles.css b/public/styles.css
index 3df2a35..012575a 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -167,42 +167,123 @@ button:hover {
 
 dialog {
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 16px;
   background: #0b1220;
   color: var(--text);
-  width: min(620px, 95vw);
+  width: min(760px, 96vw);
+  padding: 0;
 }
 
 .dialog-content {
   display: grid;
-  gap: 0.6rem;
+  gap: 0.8rem;
+  padding: 1rem;
 }
 
 .track-list {
-  max-height: 45vh;
+  max-height: min(58vh, 640px);
   overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.5rem;
+  border-radius: 12px;
+  padding: 0.6rem;
   display: grid;
-  gap: 0.3rem;
+  gap: 0.45rem;
+  background: #0a1323;
 }
 
 .track-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.65rem;
+  border: 1px solid #1f2f49;
+  border-radius: 10px;
+  padding: 0.5rem 0.6rem;
+  background: #0d1a2e;
+}
+
+.track-row:hover {
+  border-color: #34517a;
+  background: #10203a;
+}
+
+.track-check {
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.track-main {
+  min-width: 0;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.track-title {
+  font-size: 1.02rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.track-meta {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.track-status {
+  justify-self: end;
 }
 
 .dialog-actions {
-  margin-top: 0.7rem;
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
+  position: sticky;
+  bottom: 0;
+  background: linear-gradient(180deg, rgba(11, 18, 32, 0.7), rgba(11, 18, 32, 1));
+  padding-top: 0.6rem;
 }
 
 @media (max-width: 680px) {
   .search-row {
     flex-direction: column;
   }
+
+  dialog {
+    width: 98vw;
+  }
+
+  .dialog-content {
+    padding: 0.8rem;
+  }
+
+  .track-row {
+    grid-template-columns: 28px minmax(0, 1fr);
+    grid-template-areas:
+      "check title"
+      "check status";
+    align-items: start;
+  }
+
+  .track-check {
+    grid-area: check;
+    margin-top: 0.15rem;
+  }
+
+  .track-main {
+    grid-area: title;
+  }
+
+  .track-title {
+    white-space: normal;
+    line-height: 1.25;
+  }
+
+  .track-status {
+    grid-area: status;
+    justify-self: start;
+  }
 }