From 30cb723247de70ddefe893a27d6d6143a570d9dd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:56:39 +0000
Subject: [PATCH] Improve image display and layout for a better viewing
 experience

Adjusted image rendering and container sizes to optimize the display of landscape and portrait images across the featured section, ensuring content remains visually balanced and readable.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9b201064-26d8-4881-ae57-42f081461269
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 4aee36c..14aa546 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -163,9 +163,9 @@ function SideCard({ article }: { article: Article }) {
   return (
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${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 object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+        <div className="relative flex-shrink-0 flex-1 min-h-0">
+          <div className="overflow-hidden h-full">
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
@@ -175,13 +175,12 @@ function SideCard({ article }: { article: Article }) {
             </div>
           )}
         </div>
-        <div className="p-3 flex flex-col flex-1">
-          <div className="flex items-center gap-2 mb-1">
+        <div className="p-2.5 flex-shrink-0">
+          <div className="flex items-center gap-2 mb-0.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 leading-relaxed line-clamp-2">{article.excerpt}</p>
+          <h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
         </div>
       </div>
     </Link>
@@ -267,22 +266,20 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
 
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
-      <div className="grid grid-cols-1 lg:grid-cols-8 gap-4">
-        <div className="lg:col-span-3 flex">
-          <div className="w-full">
-            {isGalleryPage && galleryImages ? (
-              <GalleryHeroCard images={galleryImages.slice(0, 30)} />
-            ) : hero ? (
-              <HeroCard article={hero} />
-            ) : null}
-          </div>
+      <div className="grid grid-cols-1 lg:grid-cols-8 gap-4 lg:max-h-[420px]">
+        <div className="lg:col-span-3 lg:h-[420px]">
+          {isGalleryPage && galleryImages ? (
+            <GalleryHeroCard images={galleryImages.slice(0, 30)} />
+          ) : hero ? (
+            <HeroCard article={hero} />
+          ) : null}
         </div>
-        <div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2">
+        <div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2 lg:h-[420px]">
           {side.map((a) => (
             <SideCard key={a.id} article={a} />
           ))}
         </div>
-        <div className="lg:col-span-2">
+        <div className="lg:col-span-2 lg:h-[420px] overflow-y-auto">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>
       </div>