Nicolas
c12e34e1e7
trackList.css forced .trackRow down to 2 columns under 600px and pinned duration + the icon button both to column 2 - auto-placement then stacked them into their own rows under the track name instead of staying on one line. The fixed overhead (index/gaps/padding/an auto-sized duration and button) comes to roughly 155-165px, and even a 320px-wide phone leaves comfortably more than that for the flexible name column - .trackName already ellipsizes, so the breakpoint was solving a problem that did not exist. Removed outright. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
44 lines
1.4 KiB
CSS
44 lines
1.4 KiB
CSS
/* Shared track-list rows, used by both views/album (an album's tracks)
|
|
and musicBar/MusicBar (the current queue, in its collapsible popup). */
|
|
.trackList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.trackRow {
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: var(--bg-header);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.trackIndex { color: var(--muted); font-size: 13px; text-align: center; }
|
|
.trackName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.trackDuration { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
|
|
/* A compact circle, not the wide text button this used to be (views/album's
|
|
own "Écouter ensemble"/"Ajouter à la file") - with a whole album's worth
|
|
of these stacked in a list, one word-length pill per row read as
|
|
noisier than the same action shown as a plain play/plus icon, the
|
|
same density real track lists use. */
|
|
.trackRow button.trackIconBtn {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
background: none;
|
|
border: 1px solid rgba(255, 255, 255, .18);
|
|
color: var(--muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.trackRow button.trackIconBtn:hover { border-color: var(--text); color: var(--text); background: none; }
|
|
.trackRow button.trackIconBtn svg { width: 12px; height: 12px; }
|