From 475b5d9e0f2cfcf4b52b4c163f4908f76f1739c7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:02:44 +0000
Subject: [PATCH] Improve card layout to fill empty space and display article
 excerpts

Update the MediumCard component to use flexbox, ensuring article excerpts fill available space and eliminating blank areas below the content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1cf3980b-767b-42d8-b469-dacd00f70323
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/oYq1Msd
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8c0d896..182dd8c 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -100,8 +100,8 @@ function MediumCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid={`card-medium-${article.id}`}>
-        <div className="relative">
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border flex flex-col" data-testid={`card-medium-${article.id}`}>
+        <div className="relative flex-shrink-0">
           <div className="overflow-hidden">
             <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
           </div>
@@ -113,13 +113,13 @@ function MediumCard({ article }: { article: Article }) {
             </div>
           )}
         </div>
-        <div className="p-3.5">
+        <div className="p-3.5 flex flex-col flex-1">
           <div className="flex items-center gap-2 mb-1.5">
             <span className="text-[10px] font-medium text-primary">{article.author}</span>
             <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
           </div>
           <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
-          <p className="text-xs text-muted-foreground mt-1.5 leading-relaxed line-clamp-3">{article.excerpt}</p>
+          <p className="text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1">{article.excerpt}</p>
           <div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
             <Eye className="w-3 h-3" />
             {article.views.toLocaleString()}