fix(home): Because-cards — readable layout at 1080p / 3-up (#492)

At 1080p with three cards per row (~370 px wide) the previous layout
broke down:

- 200×200 cover left only ~150 px of text width after gap + padding,
  so titles truncated mid-word and the meta-pill wrapped vertically
  into a stack instead of staying on one line.
- The "·" separators in the meta vanished as soon as the pill wrapped,
  because the ::after lives inside the wrapping flex line.
- Albums without cover-art rendered the placeholder as an empty grey
  rect — visually broken next to neighbours that did have art.

Adjustments:

- Cover wrap 200 → 160 px. Buys 40 px of text width per card and brings
  cover/text proportions into balance.
- Meta-pill: inline-flex with width: max-content + max-width: 100% so
  the pill is content-fit when the meta line fits, capped at the
  available text width otherwise. Font 12 → 10 px, column-gap and
  padding tightened, flex-wrap kept (wraps to a second row if a server
  ever returns a really long meta string instead of clipping).
- Cover-art placeholder shows a centred Lucide Music icon at 30 %
  --text-primary alpha — same visual weight as a faded thumbnail
  instead of an empty rect.

src/components/BecauseYouLikeRail.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Play, ListPlus } from 'lucide-react';
+import { Play, ListPlus, Music } from 'lucide-react';
 import {
   SubsonicAlbum,
   buildCoverArtUrl,
@@ -211,7 +211,9 @@ const BecauseCard = memo(function BecauseCard({ album, anchor, disableArtwork }:
             loading="lazy"
           />
         ) : (
-          <div className="because-card-cover because-card-cover-placeholder" aria-hidden="true" />
+          <div className="because-card-cover because-card-cover-placeholder" aria-hidden="true">
+            <Music size={42} strokeWidth={1.5} />
+          </div>
         )}
         <div className="album-card-play-overlay">
           <button

src/styles/components.css

@@ -13962,8 +13962,8 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
 .because-card-cover-wrap {
   position: relative;
   flex: 0 0 auto;
-  width: 200px;
+  width: 160px;
-  height: 200px;
+  height: 160px;
   border-radius: 6px;
   overflow: hidden;
   background: var(--bg-input, rgba(0, 0, 0, 0.15));
@@ -13975,7 +13975,10 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
   display: block;
 }
 .because-card-cover-placeholder {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: color-mix(in srgb, var(--text-primary) 30%, transparent);
 }
 .because-card:hover .album-card-play-overlay {
   opacity: 1;
@@ -14044,10 +14047,14 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
 .because-card-meta {
   align-self: center;
   justify-content: center;
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  row-gap: 0;
-  font-size: 12px;
+  column-gap: 0.4rem;
+  font-size: 10px;
+  letter-spacing: 0.01em;
+  width: max-content;
+  max-width: 100%;
   color: var(--text-primary, var(--text-secondary, inherit));
   background: color-mix(in srgb, var(--text-primary) 14%, transparent);
   padding: 3px 10px;
@@ -14056,6 +14063,6 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
 }
 .because-card-meta > span:not(:last-child)::after {
   content: '·';
-  margin-left: 0.75rem;
+  margin-left: 0.4rem;
   opacity: 0.5;
 }