From 66ab529b32777ab5f9e9fb874b45efe119b94ead Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 18 Jan 2026 19:23:50 +0100
Subject: [PATCH] UI: replace menu icon with 'Menu' text in tracklist header

---
 js/ui.js   | 16 ++++++++--------
 styles.css |  7 +++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index 001f293..58a7b6a 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1233,7 +1233,7 @@ export class UIRenderer {
                 <span style="width: 40px; text-align: center;">#</span>
                 <span>Title</span>
                 <span class="duration-header">Duration</span>
-                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
             </div>
             ${this.createSkeletonTracks(10, false)}
         `;
@@ -1287,7 +1287,7 @@ export class UIRenderer {
                     <span style="width: 40px; text-align: center;">#</span>
                     <span>Title</span>
                     <span class="duration-header">Duration</span>
-                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
                 </div>
             `;
 
@@ -1465,7 +1465,7 @@ export class UIRenderer {
                                                                                                                                                     <span style="width: 40px; text-align: center;">#</span>
                                                                                                                                                     <span>Title</span>
                                                                                                                                                     <span class="duration-header">Duration</span>
-                                                                                                                                                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                                                                                                                                                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
                                                                                                                                                 </div>                                            `;
                                             this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true);
 
@@ -1536,7 +1536,7 @@ export class UIRenderer {
                 <span style="width: 40px; text-align: center;">#</span>
                 <span>Title</span>
                 <span class="duration-header">Duration</span>
-                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
             </div>
             ${this.createSkeletonTracks(10, true)}
         `;
@@ -1588,7 +1588,7 @@ export class UIRenderer {
                         <span style="width: 40px; text-align: center;">#</span>
                         <span>Title</span>
                         <span class="duration-header">Duration</span>
-                        <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                        <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
                     </div>
                 `;
 
@@ -1687,7 +1687,7 @@ export class UIRenderer {
                         <span style="width: 40px; text-align: center;">#</span>
                         <span>Title</span>
                         <span class="duration-header">Duration</span>
-                        <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                        <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
                     </div>
                 `;
 
@@ -1750,7 +1750,7 @@ export class UIRenderer {
                 <span style="width: 40px; text-align: center;">#</span>
                 <span>Title</span>
                 <span class="duration-header">Duration</span>
-                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
             </div>
             ${this.createSkeletonTracks(10, true)}
         `;
@@ -1791,7 +1791,7 @@ export class UIRenderer {
                     <span style="width: 40px; text-align: center;">#</span>
                     <span>Title</span>
                     <span class="duration-header">Duration</span>
-                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span>
+                    <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
                 </div>
             `;
 
diff --git a/styles.css b/styles.css
index 1a5431a..b965322 100644
--- a/styles.css
+++ b/styles.css
@@ -1118,6 +1118,13 @@ body.has-page-background .track-item:hover {
     display: flex;
 }
 
+:root[data-track-actions-mode='inline'] .track-list-header,
+:root[data-track-actions-mode='inline'] .track-item,
+:root[data-track-actions-mode='inline'] .skeleton-track,
+:root[data-track-actions-mode='inline'] #playlist-detail-tracklist .track-list-header {
+    grid-template-columns: 40px 1fr 80px 175px;
+}
+
 .track-item:hover .track-actions-inline {
     opacity: 1;
 }