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';
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">

48
webui/static/style.css
View file

@ -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;
}
}