diff --git a/src/App.css b/src/App.css index e630cb57..56e145f3 100644 --- a/src/App.css +++ b/src/App.css @@ -2002,6 +2002,100 @@ body.has-player .chat-fab { } } +/* ── Dense dump cards in the two-column profile view ── + The default card is proportioned for the 860px feed. Dropped into a ~400px + column it falls apart: the title wraps four lines deep, the meta row stacks, + every category chip takes a line of its own and the vote button floats in + the middle of the resulting void. Below is the same card re-proportioned for + the column — smaller thumb, title clamped to two lines, no teaser, and meta + plus chips sharing the line under the title. Scoped to the width where the + columns actually split; narrower than that the feed is full-width again and + the regular (then the phone) layout applies. */ +@media (min-width: 900px) { + .profile-columns .dump-feed { + padding: 0.75rem 0 0; + gap: 0.5rem; + } + + /* preview | body | vote, all top-aligned so the count sits on the title + line instead of drifting to the card's vertical middle. */ + .profile-columns .dump-card-inner { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: start; + gap: 0.55rem; + padding: 0.5rem 0.6rem; + } + + .profile-columns .dump-card-preview { + grid-area: 1 / 1; + width: 88px; + height: 50px; + } + + .profile-columns .dump-card-vote { + grid-area: 1 / 3; + align-self: start; + } + + /* Row layout with a full-width title: the title takes a line to itself, then + meta and chips flow onto the next one and only wrap when they must. */ + .profile-columns .dump-card-body { + grid-area: 1 / 2; + margin-left: 0; + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + gap: 0.15rem 0.45rem; + } + + .profile-columns .dump-card-title { + flex: 1 0 100%; + font-size: 0.9rem; + line-height: 1.3; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; + } + + /* The teaser is the first thing to go, the same call the phone layout makes. */ + .profile-columns .dump-card-comment { + display: none; + } + + .profile-columns .dump-card-meta, + .profile-columns .dump-card-categories { + margin-top: 0; + } + + .profile-columns .dump-card-meta { + gap: 0.4rem; + /* Keeps "3 weeks ago" and "1 comment" on one line each. */ + white-space: nowrap; + } + + .profile-columns .dump-card-date, + .profile-columns .dump-card-comment-count { + font-size: 0.72rem; + } + + .profile-columns .dump-card-categories { + gap: 0.25rem; + } + + .profile-columns .dump-card-category-chip { + padding: 0.05rem 0.4rem; + font-size: 0.68rem; + } + + .profile-columns .vote-btn { + padding: 0.15rem 0.45rem; + font-size: 0.78rem; + } +} + .profile-section ul { list-style: none; margin: 0; @@ -3289,6 +3383,17 @@ body.has-player .chat-fab { cursor: pointer; } +/* The `overflow: hidden` above is there for the dump card's collapse animation + (grid-template-rows: 0fr). A playlist card never collapses, and its height is + set by the 80px square thumb itself — so the clip had nothing to spare on + hover: it shaved the corners off the scaled thumb and sliced its drop shadow + into a hard-edged slab against the card border. Nothing else in the card + needs the clip (the thumb and the description clamp carry their own), so the + lift is simply allowed to render. */ +.playlist-card-inner { + overflow: visible; +} + /* Desktop: wrapper is transparent — preview and vote become direct flex items of dump-card-inner */ .dump-card-left { display: contents;