From 7b9abf181a14924f15c8ee0482e6531092ccbeba Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:25:51 +0000
Subject: [PATCH] Update carousel layout to display random articles more
 effectively

Remove the side article prop from FeaturedCarousel, adjust the layout of the right column, and update the display logic for WideCards in the home page to show random articles that are not in the carousel.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3f16617b-8f92-430f-b0bd-c0c44b00986a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index a85f957..220a866 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -360,7 +360,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
   );
 }
 
-function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, sideArticle }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; sideArticle?: Article }) {
+function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }> }) {
   const pageSize = 3;
   const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
   const [page, setPage] = useState(0);
@@ -393,9 +393,8 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, sideA
             </div>
           </div>
         </div>
-        <div className="lg:col-span-1 flex flex-col gap-4">
+        <div className="lg:col-span-1">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
-          {sideArticle && <WideCard article={sideArticle} focalPoints={focalPoints} />}
         </div>
       </div>
       {totalPages > 1 && (
@@ -522,7 +521,7 @@ export default function Home() {
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
-        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} sideArticle={widePickedArticles[0]} />
+        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
 
         {gridRows.map((row, ri) => (
           <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -536,9 +535,11 @@ export default function Home() {
           </div>
         ))}
 
-        {widePickedArticles.length > 1 && (
+        {widePickedArticles.length > 0 && (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <WideCard article={widePickedArticles[1]} focalPoints={focalPoints} />
+            {widePickedArticles.map((a) => (
+              <WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
+            ))}
           </div>
         )}