From 9eb7a49c24c51f8d76dcedd80636a4ffcf864796 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 25 May 2026 07:46:45 -0700
Subject: [PATCH] Fix auto-sync scheduled card layout

Give placed playlist cards a dedicated content wrapper, full-width action row, wider board columns, and defensive wrapping so titles, timing badges, and Run now controls stay inside card bounds.
---
 webui/static/auto-sync.js |  2 +-
 webui/static/style.css    | 48 +++++++++++++++++++++++++++++++--------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/webui/static/auto-sync.js b/webui/static/auto-sync.js
index cbbe1d7e..790e8e71 100644
--- a/webui/static/auto-sync.js
+++ b/webui/static/auto-sync.js
@@ -566,7 +566,7 @@ function autoSyncScheduledCardHtml(playlist, schedule) {
     const isRunning = playlist.pipeline_state?.status === 'running';
     return `
         <div class="auto-sync-scheduled-card ${enabled ? '' : 'disabled'}" draggable="true" data-playlist-id="${playlist.id}" ondragstart="autoSyncDragStart(event)" ondragend="autoSyncDragEnd()">
-            <div>
+            <div class="auto-sync-scheduled-main">
                 <div class="auto-sync-scheduled-name">${_esc(playlist.name)}</div>
                 <div class="auto-sync-scheduled-meta">${_esc(autoSyncSourceLabel(playlist.source))} &middot; ${playlist.track_count || 0} tracks</div>
                 <div class="auto-sync-scheduled-timing">
diff --git a/webui/static/style.css b/webui/static/style.css
index d6aaa4da..de5e2906 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -11677,6 +11677,12 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     white-space: nowrap;
 }
 
+.auto-sync-scheduled-name {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    line-height: 1.25;
+}
+
 .auto-sync-playlist-meta,
 .auto-sync-scheduled-meta {
     margin-top: 4px;
@@ -11684,6 +11690,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     font-size: 11px;
 }
 
+.auto-sync-scheduled-meta {
+    overflow-wrap: anywhere;
+    line-height: 1.3;
+}
+
 .auto-sync-scheduled-timing {
     display: flex;
     flex-wrap: wrap;
@@ -11693,11 +11704,15 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 
 .auto-sync-scheduled-timing span,
 .auto-sync-scheduled-timing small {
+    max-width: 100%;
     padding: 3px 6px;
     border-radius: 999px;
     font-size: 10px;
     font-weight: 800;
     line-height: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .auto-sync-scheduled-timing span {
@@ -11718,7 +11733,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     overflow-y: hidden;
     padding: 26px;
     display: grid;
-    grid-template-columns: repeat(10, minmax(225px, 1fr));
+    grid-template-columns: repeat(10, minmax(240px, 1fr));
     grid-auto-rows: minmax(0, 1fr);
     gap: 16px;
 }
@@ -11828,24 +11843,33 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 }
 
 .auto-sync-scheduled-card {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
     padding: 14px;
     margin-bottom: 12px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: start;
-    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+    overflow: hidden;
 }
 
 .auto-sync-scheduled-card.disabled {
     opacity: 0.52;
 }
 
+.auto-sync-scheduled-main {
+    min-width: 0;
+    width: 100%;
+}
+
 .auto-sync-scheduled-actions {
     display: flex;
     flex-direction: row;
-    align-items: flex-end;
-    gap: 7px;
-    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
 }
 
 .auto-sync-scheduled-card button {
@@ -11861,13 +11885,17 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 
 .auto-sync-scheduled-card button.run {
     width: auto;
-    min-width: 68px;
+    min-width: 0;
+    flex: 1;
     padding: 0 9px;
     color: rgb(var(--accent-light-rgb));
     background: rgba(var(--accent-rgb), 0.12);
     border: 1px solid rgba(var(--accent-rgb), 0.22);
     font-size: 10px;
     font-weight: 800;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .auto-sync-scheduled-card button.run:disabled {
@@ -12208,7 +12236,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     }
 
     .auto-sync-board {
-        grid-template-columns: repeat(10, minmax(210px, 230px));
+        grid-template-columns: repeat(10, minmax(230px, 250px));
         padding: 18px;
     }
 }