From d58ee4c679fdbbc5a0a6eb47d38fc3794b72778c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:29:16 +0000
Subject: [PATCH] Add a single featured article to the bottom of the homepage
 grid

Move the WideCard component to display a single featured article at the end of the homepage grid layout, consuming two columns on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: eab6ad47-19af-45fd-9e98-a28298c6a4e4
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, 5 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 9a3a6af..1b7dd12 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -523,14 +523,6 @@ export default function Home() {
 
         <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
 
-        {widePickedArticles.length > 0 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {widePickedArticles.map((a) => (
-              <WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
-            ))}
-          </div>
-        )}
-
         {gridRows.map((row, ri) => (
           <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
             {row.map((item, ci) =>
@@ -540,6 +532,11 @@ export default function Home() {
                   ? <MediumCard key={item.article.id} article={item.article} focalPoints={focalPoints} />
                   : null
             )}
+            {ri === gridRows.length - 1 && widePickedArticles.length > 0 && (
+              <div className="sm:col-span-2">
+                <WideCard article={widePickedArticles[0]} focalPoints={focalPoints} />
+              </div>
+            )}
           </div>
         ))}