From 80a88a62ace89b0a401fe211586ecfeb7fbc48f0 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 26 May 2026 20:12:15 -0700
Subject: [PATCH] Auto-Sync sidebar: improve playlist card readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mirrored-playlist cards in the Auto-Sync schedule modal's
sidebar were truncating long names with ellipsis on a single line
+ rendering meta info at 10px, which made entries like
"Top Missed Recordings of 2024 for Nezreka" or "ListenBrainz
Weekly Exploration" unreadable.

- Name wraps to multiple lines instead of ellipsis-truncating
  (sidebar is narrow; truncation hid critical disambiguating
  text like the year / week / username).
- Bumped name 12px → 13px, meta 10px → 11px with brighter color
  (0.4 → 0.55 alpha).
- Bumped card padding 10px/12px → 12px/14px + spacing 6px → 8px
  so multi-line entries have breathing room.
- Pinned the leading status dot to the first text line via
  ``margin-top`` so multi-line names flow underneath rather than
  push the dot off-center.
---
 webui/static/style.css | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index 4c60f887..3c6c0843 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -11809,10 +11809,10 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 }
 
 .auto-sync-playlist {
-    padding: 10px 12px;
-    margin-bottom: 6px;
+    padding: 12px 14px;
+    margin-bottom: 8px;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 10px;
 }
 
@@ -11823,6 +11823,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.18);
     flex-shrink: 0;
+    /* Pin the status dot to the first line of the name so multi-line
+     * playlist titles flow underneath it instead of pushing it down. */
+    margin-top: 6px;
 }
 
 .auto-sync-playlist.scheduled::before {
@@ -11867,24 +11870,27 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 .auto-sync-playlist-name,
 .auto-sync-scheduled-name {
     color: #fff;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    line-height: 1.35;
+    /* Wrap long names instead of truncating with ellipsis — the
+     * sidebar is narrow and long ListenBrainz / Spotify titles were
+     * getting clipped beyond recognition. */
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .auto-sync-scheduled-name {
-    white-space: normal;
-    overflow-wrap: anywhere;
     line-height: 1.3;
 }
 
 .auto-sync-playlist-meta,
 .auto-sync-scheduled-meta {
-    margin-top: 2px;
-    color: rgba(255, 255, 255, 0.4);
-    font-size: 10px;
+    margin-top: 4px;
+    color: rgba(255, 255, 255, 0.55);
+    font-size: 11px;
+    line-height: 1.3;
 }
 
 .auto-sync-scheduled-meta {