Fix pool post cards rendering as a colored sliver

PostCard's Link is inline by default; wrapped in a div on the pool detail
page it stopped being blockified like a grid child, so its rating-tinted
border collapsed into a vertical line on the left. The card is now
block-level, and the pool grid only wraps blacklisted posts (for the red
ring), so normal cards render exactly like the Online grid.
This commit is contained in:
2026-09-17 14:32:24 -05:00
parent 0a7dc5a991
commit 26f5069aa2
2 changed files with 18 additions and 13 deletions
+1 -1
View File
@@ -31,7 +31,7 @@ export function PostCard({
to={`/detail/${post.id}`}
state={from ? { from } : undefined}
className={cn(
"group overflow-hidden rounded-lg border bg-ctp-base transition",
"group block overflow-hidden rounded-lg border bg-ctp-base transition",
ratingBorder[post.rating] ?? "border-ctp-surface0",
)}
>
+11 -6
View File
@@ -268,23 +268,28 @@ export default function PoolDetailPage() {
const blacklisted =
blacklistSet.size > 0 &&
postIsBlacklisted(post, blacklistSet).length > 0;
const card = (
if (!blacklisted) {
return (
<PostCard
key={post.id}
post={post}
inLibrary={inLibrary.has(post.file.md5)}
from={`${location.pathname}${location.search}`}
/>
);
return blacklisted ? (
}
return (
<div
key={post.id}
className="rounded-lg ring-1 ring-ctp-red/50"
className="min-w-0 rounded-lg ring-1 ring-ctp-red/50"
title="Matches your blacklist"
>
{card}
<PostCard
post={post}
inLibrary={inLibrary.has(post.file.md5)}
from={`${location.pathname}${location.search}`}
/>
</div>
) : (
<div key={post.id}>{card}</div>
);
})}
</div>