diff --git a/src/lib/components/FocusMode.svelte b/src/lib/components/FocusMode.svelte index 001ab45a3..d25ea069a 100644 --- a/src/lib/components/FocusMode.svelte +++ b/src/lib/components/FocusMode.svelte @@ -185,11 +185,11 @@
-
- -
{trackTitle}
+
{trackTitle}
+
+ +
{artist}
-
{artist}
@@ -487,8 +487,17 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - flex: 1; - min-width: 0; + } + + .track-artist-row { + display: flex; + align-items: center; + gap: 6px; + margin-top: 2px; + } + + .track-artist-row :global(.stack-icon) { + flex-shrink: 0; } .track-artist { @@ -497,7 +506,6 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin-top: 2px; } /* Playback Section */ diff --git a/src/routes/miniplayer/+page.svelte b/src/routes/miniplayer/+page.svelte index b103c1f70..9b392fea4 100644 --- a/src/routes/miniplayer/+page.svelte +++ b/src/routes/miniplayer/+page.svelte @@ -231,11 +231,9 @@
-
- -
{playerState.currentTrack?.title ?? 'No track'}
-
+
{playerState.currentTrack?.title ?? 'No track'}
+ {playerState.currentTrack?.artist ?? '—'} {#if playerState.currentTrack?.album} — @@ -412,18 +410,6 @@ padding-right: 30px; } - .title-row { - display: flex; - align-items: center; - gap: 6px; - white-space: nowrap; - overflow: hidden; - } - - .title-row :global(.stack-icon) { - flex-shrink: 0; - } - .title { font-weight: 600; font-size: 14px; @@ -432,11 +418,12 @@ text-overflow: ellipsis; color: #fff; line-height: 1.4; - flex: 1; - min-width: 0; } .artist-album { + display: flex; + align-items: center; + gap: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; @@ -445,6 +432,10 @@ margin-top: 2px; } + .artist-album :global(.stack-icon) { + flex-shrink: 0; + } + .separator { margin: 0 4px; opacity: 0.5;