From f6ca0a2e70067c85d5b322d8368263343c46d161 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:42:14 +0000
Subject: [PATCH] Adjust layout to make top stories section wider

Modify the grid layout for the featured carousel, changing the column span for the main content and top stories section to achieve a wider display for top stories.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6b9307df-8031-41c9-bd2b-9f9c6fcbc1ba
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 04bd8cf..a373613 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -239,8 +239,8 @@ 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-6 gap-4">
-        <div className={wide ? "lg:col-span-5" : "lg:col-span-4"}>
+      <div className="grid grid-cols-1 lg:grid-cols-8 gap-4">
+        <div className={wide ? "lg:col-span-6" : "lg:col-span-5"}>
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
@@ -254,7 +254,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
             ))}
           </div>
         )}
-        <div className="lg:col-span-1">
+        <div className="lg:col-span-2">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>
       </div>