From b01e76df9ca939b1287b82e1f4376a84ebc1638e Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com>
Date: Thu, 7 May 2026 02:58:01 +0200
Subject: [PATCH] =?UTF-8?q?fix(home):=20Because-cards=20=E2=80=94=20readab?=
=?UTF-8?q?le=20layout=20at=201080p=20/=203-up=20(#492)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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 | 6 ++++--
src/styles/components.css | 21 ++++++++++++++-------
2 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/src/components/BecauseYouLikeRail.tsx b/src/components/BecauseYouLikeRail.tsx
index 46558583..d6579ca7 100644
--- a/src/components/BecauseYouLikeRail.tsx
+++ b/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"
/>
) : (
-
+