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:
@@ -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",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -268,23 +268,28 @@ export default function PoolDetailPage() {
|
||||
const blacklisted =
|
||||
blacklistSet.size > 0 &&
|
||||
postIsBlacklisted(post, blacklistSet).length > 0;
|
||||
const card = (
|
||||
<PostCard
|
||||
post={post}
|
||||
inLibrary={inLibrary.has(post.file.md5)}
|
||||
from={`${location.pathname}${location.search}`}
|
||||
/>
|
||||
);
|
||||
return blacklisted ? (
|
||||
if (!blacklisted) {
|
||||
return (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
inLibrary={inLibrary.has(post.file.md5)}
|
||||
from={`${location.pathname}${location.search}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user