From 9a1ef9d0ef9911d290933eb2964504d2d0bb84ac Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 18 Jan 2026 22:21:55 +0100
Subject: [PATCH] UI: fix tracklist layout for editable playlists (add space
 for delete button)

---
 js/ui.js   |  3 +++
 styles.css | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/js/ui.js b/js/ui.js
index 58a7b6a..569eb51 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1596,6 +1596,7 @@ export class UIRenderer {
 
                 // Add remove buttons and enable reordering ONLY IF OWNED
                 if (ownedPlaylist) {
+                    tracklistContainer.classList.add('is-editable');
                     const trackItems = tracklistContainer.querySelectorAll('.track-item');
                     trackItems.forEach((item, index) => {
                         const actionsDiv = item.querySelector('.track-item-actions');
@@ -1610,6 +1611,8 @@ export class UIRenderer {
                     });
 
                     this.enableTrackReordering(tracklistContainer, tracks, playlistId, syncManager);
+                } else {
+                    tracklistContainer.classList.remove('is-editable');
                 }
 
                 // Update header like button - hide for user playlists
diff --git a/styles.css b/styles.css
index e8d8184..e25365f 100644
--- a/styles.css
+++ b/styles.css
@@ -980,6 +980,10 @@ body.has-page-background .track-item:hover {
     justify-self: flex-end;
 }
 
+.is-editable .track-list-header .duration-header {
+    padding-right: 1.5rem;
+}
+
 .track-item {
     display: grid;
     grid-template-columns: 40px 1fr 80px 48px;
@@ -1148,6 +1152,17 @@ body.has-page-background .track-item:hover {
     color: var(--foreground);
 }
 
+/* Editable Playlist Track Items (with remove button) */
+.is-editable .track-list-header,
+.is-editable .track-item {
+    grid-template-columns: 40px 1fr 80px 90px;
+}
+
+:root[data-track-actions-mode='inline'] .is-editable .track-list-header,
+:root[data-track-actions-mode='inline'] .is-editable .track-item {
+    grid-template-columns: 40px 1fr 80px 260px;
+}
+
 .detail-header {
     display: flex;
     align-items: flex-start;
@@ -2617,6 +2632,10 @@ input:checked + .slider::before {
     justify-self: flex-end;
 }
 
+.is-editable .track-list-header .duration-header {
+    padding-right: 1.5rem;
+}
+
 /* Responsive Design */
 
 @supports (padding-top: env(safe-area-inset-top)) {