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 `
-
+
${_esc(playlist.name)}
${_esc(autoSyncSourceLabel(playlist.source))} · ${playlist.track_count || 0} tracks
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; } }