From 5ac71be0cf7b6d3f71a87e8d37919d04df98dc19 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 2 Mar 2026 18:08:57 +0000
Subject: [PATCH] Adjust homepage layout to properly align sidebar and main
 content

Modify the grid layout on the homepage to remove `items-stretch` and adjust sidebar styling, restoring the original layout without content stretching.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 43cea545-973f-4516-8774-f1641c09b9e5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 432acaf..8854fe0 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -557,7 +557,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">
 
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 items-stretch">
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
           <div className="lg:col-span-3 space-y-4">
             <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
             {widePickedArticles.length > 0 && (
@@ -568,11 +568,10 @@ export default function Home() {
               </div>
             )}
           </div>
-          <div className="lg:col-span-1 flex flex-col gap-4 h-full">
+          <div className="lg:col-span-1 space-y-4">
             <SidebarWeatherWidget />
-            <div className="flex-1 flex flex-col">
-              {articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} className="flex-1" />}
-            </div>
+            {articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} />}
+            <SidebarAd />
           </div>
         </div>