diff --git a/webui/static/auto-sync.js b/webui/static/auto-sync.js
index b54b725e..cbbe1d7e 100644
--- a/webui/static/auto-sync.js
+++ b/webui/static/auto-sync.js
@@ -373,14 +373,11 @@ function renderAutoSyncPipelineMonitor(playlists) {
-
- ${visible.length ? visible.map(({ playlist, state }) => autoSyncPipelineMonitorCardHtml(playlist, state)).join('') : `
-
- Ready
- Scheduled playlists will appear here while the all-in-one pipeline runs.
-
- `}
-
+ ${visible.length ? `
+
+ ${visible.map(({ playlist, state }) => autoSyncPipelineMonitorCardHtml(playlist, state)).join('')}
+
+ ` : 'ReadyScheduled playlists appear here while the all-in-one pipeline runs.
'}
`;
}
diff --git a/webui/static/style.css b/webui/static/style.css
index 1dad85bc..d6aaa4da 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -11203,7 +11203,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-modal {
width: min(1500px, calc(100vw - 40px));
- height: min(920px, calc(100vh - 32px));
+ height: min(940px, calc(100vh - 28px));
background:
radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%),
rgba(17, 19, 27, 0.98);
@@ -11222,7 +11222,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
- padding: 22px 24px 18px;
+ padding: 22px 26px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
@@ -11276,7 +11276,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-summary div {
- padding: 14px 20px;
+ padding: 12px 20px;
background: rgba(255, 255, 255, 0.025);
}
@@ -11298,7 +11298,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-monitor {
flex-shrink: 0;
- padding: 14px 18px;
+ padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 14% 0%, rgba(var(--accent-rgb), 0.14), transparent 34%),
@@ -11310,7 +11310,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
align-items: center;
justify-content: space-between;
gap: 16px;
- margin-bottom: 10px;
+ margin-bottom: 0;
+}
+
+.auto-sync-monitor-head > div {
+ min-width: 0;
}
.auto-sync-monitor-head strong,
@@ -11365,6 +11369,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
+ margin-top: 10px;
}
.auto-sync-monitor-card,
@@ -11380,7 +11385,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
align-items: stretch;
justify-content: space-between;
gap: 10px;
- padding: 11px;
+ padding: 10px;
}
.auto-sync-monitor-card.running {
@@ -11483,8 +11488,13 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-monitor-empty {
- grid-column: 1 / -1;
- padding: 16px;
+ display: flex;
+ align-items: baseline;
+ gap: 10px;
+ width: fit-content;
+ max-width: 100%;
+ margin-top: 8px;
+ padding: 8px 10px;
}
.auto-sync-monitor-empty span,
@@ -11499,15 +11509,18 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-monitor-empty small {
- margin-top: 3px;
+ margin-top: 0;
color: rgba(255, 255, 255, 0.38);
font-size: 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.auto-sync-tabs {
display: flex;
gap: 8px;
- padding: 12px 18px;
+ padding: 12px 18px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.018);
flex-shrink: 0;
@@ -11551,7 +11564,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
align-items: center;
justify-content: space-between;
gap: 16px;
- padding: 12px 18px;
+ padding: 14px 18px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.16);
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.03) 60%, transparent 100%);
flex-shrink: 0;
@@ -11578,7 +11591,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
min-height: 0;
flex: 1;
display: grid;
- grid-template-columns: 300px 1fr;
+ grid-template-columns: 300px minmax(0, 1fr);
}
.auto-sync-sidebar {
@@ -11703,11 +11716,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
- padding: 18px;
+ padding: 26px;
display: grid;
- grid-template-columns: repeat(10, minmax(185px, 1fr));
+ grid-template-columns: repeat(10, minmax(225px, 1fr));
grid-auto-rows: minmax(0, 1fr);
- gap: 12px;
+ gap: 16px;
}
.auto-sync-column {
@@ -11732,7 +11745,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 12px;
+ padding: 14px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.86);
font-weight: 800;
@@ -11749,7 +11762,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
flex: 1;
min-height: 0;
overflow-y: auto;
- padding: 10px;
+ padding: 14px;
}
.auto-sync-column-list::-webkit-scrollbar,
@@ -11815,11 +11828,12 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-scheduled-card {
- padding: 10px;
- margin-bottom: 10px;
- display: flex;
- justify-content: space-between;
- gap: 8px;
+ padding: 14px;
+ margin-bottom: 12px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: start;
+ gap: 12px;
}
.auto-sync-scheduled-card.disabled {
@@ -11828,9 +11842,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-scheduled-actions {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: flex-end;
- gap: 6px;
+ gap: 7px;
flex-shrink: 0;
}
@@ -11847,8 +11861,8 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-scheduled-card button.run {
width: auto;
- min-width: 64px;
- padding: 0 8px;
+ min-width: 68px;
+ 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);
@@ -12194,7 +12208,8 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-board {
- grid-template-columns: repeat(10, minmax(165px, 180px));
+ grid-template-columns: repeat(10, minmax(210px, 230px));
+ padding: 18px;
}
}
@@ -12212,7 +12227,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-monitor {
- padding: 10px 14px;
+ padding: 9px 14px;
}
.auto-sync-monitor-empty,
@@ -12227,7 +12242,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-board-intro,
.auto-sync-automation-intro,
.auto-sync-history-intro {
- padding: 9px 14px;
+ padding: 10px 14px;
}
}
@@ -12241,6 +12256,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
flex-direction: column;
}
+ .auto-sync-monitor-empty {
+ align-items: flex-start;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .auto-sync-monitor-empty small {
+ white-space: normal;
+ }
+
.auto-sync-monitor-card {
flex-direction: column;
}
@@ -12261,6 +12286,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-history-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
+
+ .auto-sync-scheduled-card {
+ grid-template-columns: 1fr;
+ }
+
+ .auto-sync-scheduled-actions {
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
}
/* Enhanced Progress Bar Animation */