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

Auto-Sync sidebar: improve playlist card readability

Browse source 
The mirrored-playlist cards in the Auto-Sync schedule modal's
sidebar were truncating long names with ellipsis on a single line
+ rendering meta info at 10px, which made entries like
"Top Missed Recordings of 2024 for Nezreka" or "ListenBrainz
Weekly Exploration" unreadable.

- Name wraps to multiple lines instead of ellipsis-truncating
  (sidebar is narrow; truncation hid critical disambiguating
  text like the year / week / username).
- Bumped name 12px → 13px, meta 10px → 11px with brighter color
  (0.4 → 0.55 alpha).
- Bumped card padding 10px/12px → 12px/14px + spacing 6px → 8px
  so multi-line entries have breathing room.
- Pinned the leading status dot to the first text line via
  ``margin-top`` so multi-line names flow underneath rather than
  push the dot off-center.
This commit is contained in:
Broque Thomas 2026-05-26 20:12:15 -07:00
parent a8e6432e86
commit 80a88a62ac
1 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
webui/static/style.css
View file

@ -11809,10 +11809,10 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-playlist {
padding: 10px 12px;
margin-bottom: 6px;
padding: 12px 14px;
margin-bottom: 8px;
display: flex;
align-items: center;
align-items: flex-start;
gap: 10px;
}
@ -11823,6 +11823,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
/* Pin the status dot to the first line of the name so multi-line
* playlist titles flow underneath it instead of pushing it down. */
margin-top: 6px;
}
.auto-sync-playlist.scheduled::before {
@ -11867,24 +11870,27 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-playlist-name,
.auto-sync-scheduled-name {
color: #fff;
font-size: 12px;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.35;
/* Wrap long names instead of truncating with ellipsis — the
* sidebar is narrow and long ListenBrainz / Spotify titles were
* getting clipped beyond recognition. */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.auto-sync-scheduled-name {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.3;
}
.auto-sync-playlist-meta,
.auto-sync-scheduled-meta {
margin-top: 2px;
color: rgba(255, 255, 255, 0.4);
font-size: 10px;
margin-top: 4px;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
line-height: 1.3;
}
.auto-sync-scheduled-meta {