sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve article card display and badge visibility

Browse Source 
Move the category badge outside the overflow-hidden container in ArticleCard component to ensure it is fully visible.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 10b24505-2445-4bc5-a87a-559c2ddaf588
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/cftwqyT
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 16:42:22 +00:00
parent eb49f9a48d
commit 8dd26f02b0
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772296901719.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

18
client/src/pages/home.tsx
View File

@ -94,14 +94,16 @@ function ArticleCard({ article }: { article: Article }) {
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
data-testid={`card-article-${article.id}`}
>
<div className="relative overflow-hidden rounded-t-md">
<img
src={article.coverImage || "/images/article-1.png"}
alt={article.title}
className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
loading="lazy"
/>
<Badge className="absolute top-3 left-3 text-xs no-default-active-elevate">
<div className="relative rounded-t-md">
<div className="overflow-hidden rounded-t-md">
<img
src={article.coverImage || "/images/article-1.png"}
alt={article.title}
className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
loading="lazy"
/>
</div>
<Badge className="absolute top-3 left-3 text-xs no-default-active-elevate z-10">
{article.category}
</Badge>
</div>