diff --git a/src/lib/components/immersive/panels/SuggestionsPanel.svelte b/src/lib/components/immersive/panels/SuggestionsPanel.svelte index b34121f71..66988b95c 100644 --- a/src/lib/components/immersive/panels/SuggestionsPanel.svelte +++ b/src/lib/components/immersive/panels/SuggestionsPanel.svelte @@ -210,8 +210,10 @@ Qobuz
- {#if playlist.images?.[0]} - + + {@const playlistImage = playlist.images?.[playlist.images.length - 1] || playlist.images?.[0]} + {#if playlistImage} + {:else}
@@ -273,7 +275,7 @@
- +
@@ -430,16 +432,16 @@ object-fit: contain; } - /* Qobuz icon: viewBox 1001x1006, content fills box */ + /* Qobuz icon: viewBox 1001x1006, Q icon with ~15% whitespace around content */ .badge-qobuz { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } - /* QBZ icon: viewBox 1083x1083, circular vinyl that fills box - needs to appear same size */ + /* QBZ icon: viewBox 1083x1083, circular vinyl fills entire box - smaller to match Qobuz visually */ .badge-qbz { - width: 22px; - height: 22px; + width: 17px; + height: 17px; } .card-info { @@ -504,9 +506,10 @@ transition: opacity 150ms ease; } + /* Playlist SVG: 20x20 viewBox but content only fills ~77% - needs larger size to match Lucide Radio */ .glyph-icon { - width: 28px; - height: 28px; + width: 32px; + height: 32px; filter: invert(1); opacity: 0.9; }