From fd7ecad7538ae148bb85affa1238217c9068d224 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 21:52:06 +0000
Subject: [PATCH] Make weather widget more compact and informative

Update the weather widget component to display temperature, weather description, city, wind speed, and humidity in a more compact, single-line layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d391d31b-d28a-42c0-884b-d4aa19bfcf94
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/components/weather-widget.tsx | 31 +++++++++---------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/client/src/components/weather-widget.tsx b/client/src/components/weather-widget.tsx
index 6bfdb2b..b4b2965 100644
--- a/client/src/components/weather-widget.tsx
+++ b/client/src/components/weather-widget.tsx
@@ -107,28 +107,21 @@ export function WeatherWidget() {
   if (error || !weather) return null;
 
   return (
-    <div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="widget-weather">
-      <div className="flex items-center gap-2 mb-3">
-        <Thermometer className="w-4 h-4 text-primary" />
-        <h3 className="font-bold text-card-foreground text-sm">Wetter</h3>
-      </div>
-      <div className="flex items-center gap-4">
-        <div className="flex-shrink-0">
-          {getWeatherIcon(weather.weatherCode)}
-        </div>
+    <div className="bg-card rounded-lg border border-card-border px-3 py-2" data-testid="widget-weather">
+      <div className="flex items-center gap-3">
+        <div className="flex-shrink-0">{getWeatherIcon(weather.weatherCode)}</div>
         <div className="flex-1 min-w-0">
-          <div className="text-2xl font-bold text-card-foreground">{weather.temperature}°C</div>
-          <div className="text-xs text-muted-foreground">{getWeatherText(weather.weatherCode)}</div>
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-lg font-bold text-card-foreground">{weather.temperature}°C</span>
+            <span className="text-[10px] text-muted-foreground">{getWeatherText(weather.weatherCode)}</span>
+          </div>
+          <div className="flex items-center gap-3 text-[10px] text-muted-foreground">
+            <span className="flex items-center gap-0.5"><MapPin className="w-2.5 h-2.5" />{weather.city}</span>
+            <span className="flex items-center gap-0.5"><Wind className="w-2.5 h-2.5" />{weather.windSpeed} km/h</span>
+            <span className="flex items-center gap-0.5"><Droplets className="w-2.5 h-2.5" />{weather.humidity}%</span>
+          </div>
         </div>
       </div>
-      <div className="flex items-center gap-1 mt-2 text-[10px] text-muted-foreground">
-        <MapPin className="w-3 h-3" />
-        <span>{weather.city}</span>
-      </div>
-      <div className="flex items-center gap-4 mt-2 text-[10px] text-muted-foreground">
-        <span className="flex items-center gap-1"><Wind className="w-3 h-3" /> {weather.windSpeed} km/h</span>
-        <span className="flex items-center gap-1"><Droplets className="w-3 h-3" /> {weather.humidity}%</span>
-      </div>
     </div>
   );
 }