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.
This commit is contained in:
Frank Stellmacher
2026-05-07 02:58:01 +02:00
committed by GitHub
parent 38b89f9730
commit b01e76df9c
2 changed files with 18 additions and 9 deletions
+4 -2
View File
@@ -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