danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix auto-sync scheduled card layout

Browse source 
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.
This commit is contained in:
Broque Thomas 2026-05-25 07:46:45 -07:00
parent d8d8e0bcb5
commit 9eb7a49c24
2 changed files with 39 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webui/static/auto-sync.js
View file

@ -566,7 +566,7 @@ function autoSyncScheduledCardHtml(playlist, schedule) {
const isRunning = playlist.pipeline_state?.status === 'running'; const isRunning = playlist.pipeline_state?.status === 'running';
return ` return `
<div class="auto-sync-scheduled-card ${enabled ? '' : 'disabled'}" draggable="true" data-playlist-id="${playlist.id}" ondragstart="autoSyncDragStart(event)" ondragend="autoSyncDragEnd()"> <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-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-meta">${_esc(autoSyncSourceLabel(playlist.source))} &middot; ${playlist.track_count || 0} tracks</div>
<div class="auto-sync-scheduled-timing"> <div class="auto-sync-scheduled-timing">

48
webui/static/style.css
View file

@ -11677,6 +11677,12 @@ body.helper-mode-active #dashboard-activity-feed:hover {
white-space: nowrap; white-space: nowrap;
} }
.auto-sync-scheduled-name {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.25;
}
.auto-sync-playlist-meta, .auto-sync-playlist-meta,
.auto-sync-scheduled-meta { .auto-sync-scheduled-meta {
margin-top: 4px; margin-top: 4px;
@ -11684,6 +11690,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
font-size: 11px; font-size: 11px;
} }
.auto-sync-scheduled-meta {
overflow-wrap: anywhere;
line-height: 1.3;
}
.auto-sync-scheduled-timing { .auto-sync-scheduled-timing {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -11693,11 +11704,15 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-scheduled-timing span, .auto-sync-scheduled-timing span,
.auto-sync-scheduled-timing small { .auto-sync-scheduled-timing small {
max-width: 100%;
padding: 3px 6px; padding: 3px 6px;
border-radius: 999px; border-radius: 999px;
font-size: 10px; font-size: 10px;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.auto-sync-scheduled-timing span { .auto-sync-scheduled-timing span {
@ -11718,7 +11733,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
overflow-y: hidden; overflow-y: hidden;
padding: 26px; padding: 26px;
display: grid; display: grid;
grid-template-columns: repeat(10, minmax(225px, 1fr)); grid-template-columns: repeat(10, minmax(240px, 1fr));
grid-auto-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
gap: 16px; gap: 16px;
} }
@ -11828,24 +11843,33 @@ body.helper-mode-active #dashboard-activity-feed:hover {
} }
.auto-sync-scheduled-card { .auto-sync-scheduled-card {
box-sizing: border-box;
width: 100%;
min-width: 0;
padding: 14px; padding: 14px;
margin-bottom: 12px; margin-bottom: 12px;
display: grid; display: flex;
grid-template-columns: minmax(0, 1fr) auto; flex-direction: column;
align-items: start; gap: 11px;
gap: 12px; overflow: hidden;
} }
.auto-sync-scheduled-card.disabled { .auto-sync-scheduled-card.disabled {
opacity: 0.52; opacity: 0.52;
} }
.auto-sync-scheduled-main {
min-width: 0;
width: 100%;
}
.auto-sync-scheduled-actions { .auto-sync-scheduled-actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: center;
gap: 7px; justify-content: space-between;
flex-shrink: 0; gap: 8px;
width: 100%;
} }
.auto-sync-scheduled-card button { .auto-sync-scheduled-card button {
@ -11861,13 +11885,17 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-scheduled-card button.run { .auto-sync-scheduled-card button.run {
width: auto; width: auto;
min-width: 68px; min-width: 0;
flex: 1;
padding: 0 9px; padding: 0 9px;
color: rgb(var(--accent-light-rgb)); color: rgb(var(--accent-light-rgb));
background: rgba(var(--accent-rgb), 0.12); background: rgba(var(--accent-rgb), 0.12);
border: 1px solid rgba(var(--accent-rgb), 0.22); border: 1px solid rgba(var(--accent-rgb), 0.22);
font-size: 10px; font-size: 10px;
font-weight: 800; font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.auto-sync-scheduled-card button.run:disabled { .auto-sync-scheduled-card button.run:disabled {
@ -12208,7 +12236,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
} }
.auto-sync-board { .auto-sync-board {
grid-template-columns: repeat(10, minmax(210px, 230px)); grid-template-columns: repeat(10, minmax(230px, 250px));
padding: 18px; padding: 18px;
} }
} }