From 4ca5e0859f1a45ae8dd91bdcbeaf2c31f5431199 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 2 Mar 2026 18:06:52 +0000
Subject: [PATCH] Enhance sidebar widgets for improved visual appeal and
 information density

Adjusts the layout and styling of the weather and recent articles widgets in the sidebar, increasing their minimum height and padding for better readability and visual presence.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5231fa06-1014-438e-b4da-d4785d397fd3
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/components/weather-widget.tsx |  2 +-
 client/src/pages/home.tsx                | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/weather-widget.tsx b/client/src/components/weather-widget.tsx
index 3a2b612..c66bfd9 100644
--- a/client/src/components/weather-widget.tsx
+++ b/client/src/components/weather-widget.tsx
@@ -209,7 +209,7 @@ export function SidebarWeatherWidget() {
   if (!weather) return null;
 
   return (
-    <div className="bg-gradient-to-br from-card to-card/80 rounded-lg border border-card-border p-4 aspect-square flex flex-col justify-between" data-testid="sidebar-weather">
+    <div className="bg-gradient-to-br from-card to-card/80 rounded-lg border border-card-border p-4 min-h-[280px] flex flex-col justify-between" data-testid="sidebar-weather">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
           <MapPin className="w-3.5 h-3.5 text-primary" />
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index e0beb87..e59d5a6 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -305,15 +305,15 @@ function NativeAdCard() {
 
 function TopStoriesList({ articles }: { articles: Article[] }) {
   return (
-    <div className="bg-card rounded-lg border border-card-border p-3" data-testid="sidebar-top-stories">
-      <h3 className="font-bold text-card-foreground text-xs mb-2 flex items-center gap-2">
-        <span className="w-1 h-3.5 bg-primary rounded-full" />
+    <div className="bg-card rounded-lg border border-card-border p-4" data-testid="sidebar-top-stories">
+      <h3 className="font-bold text-card-foreground text-sm mb-3 flex items-center gap-2">
+        <span className="w-1 h-4 bg-primary rounded-full" />
         Zuletzt hinzugefügt
       </h3>
-      <div className="space-y-0">
+      <div className="space-y-1">
         {articles.slice(0, 5).map((article) => (
           <Link key={article.id} href={`/article/${article.slug}`}>
-            <div className="group cursor-pointer py-2 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
+            <div className="group cursor-pointer py-3 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
               <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
               <div className="flex items-center gap-1.5 mt-0.5">
                 <span className="text-[10px] text-muted-foreground">{article.author}</span>