mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
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:
committed by
GitHub
parent
38b89f9730
commit
b01e76df9c
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user