From 12b8af827a1e477f5d88cc6b1ddfc1b010d4788c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 5 Mar 2026 09:53:39 +0000
Subject: [PATCH] Improve layout stability by setting fixed minimum heights for
 all widgets

Applies a fixed `min-height` to various widgets (BreakingNewsWidget, HoroscopeWidget, NewsWidget, PhotoGalleryWidget, RecipeWidget, SidebarWeatherWidget) to prevent content shifting and ensure a stable layout, especially on mobile devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 7f217468-f37a-450b-813e-25faac95a285
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/breaking-news-widget.tsx | 2 +-
 client/src/components/horoscope-widget.tsx     | 2 +-
 client/src/components/news-widget.tsx          | 2 +-
 client/src/components/photo-gallery.tsx        | 6 +++---
 client/src/components/recipe-widget.tsx        | 2 +-
 client/src/components/weather-widget.tsx       | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/breaking-news-widget.tsx b/client/src/components/breaking-news-widget.tsx
index b2b01d7..9c9cfa2 100644
--- a/client/src/components/breaking-news-widget.tsx
+++ b/client/src/components/breaking-news-widget.tsx
@@ -40,7 +40,7 @@ export function BreakingNewsWidget() {
 
   return (
     <div
-      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col"
+      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col min-h-[320px]"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
       data-testid="widget-breaking-news"
diff --git a/client/src/components/horoscope-widget.tsx b/client/src/components/horoscope-widget.tsx
index 9c1501c..48a7091 100644
--- a/client/src/components/horoscope-widget.tsx
+++ b/client/src/components/horoscope-widget.tsx
@@ -32,7 +32,7 @@ export function HoroscopeWidget() {
 
   return (
     <div
-      className="rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
+      className="rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col min-h-[320px]"
       style={{ background: "linear-gradient(135deg, hsl(250 30% 14%), hsl(270 25% 10%))" }}
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
diff --git a/client/src/components/news-widget.tsx b/client/src/components/news-widget.tsx
index 8f80365..90c213c 100644
--- a/client/src/components/news-widget.tsx
+++ b/client/src/components/news-widget.tsx
@@ -40,7 +40,7 @@ export function NewsWidget() {
 
   return (
     <div
-      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col"
+      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col min-h-[320px]"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
       data-testid="widget-news"
diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx
index 35a2fc0..fb270fa 100644
--- a/client/src/components/photo-gallery.tsx
+++ b/client/src/components/photo-gallery.tsx
@@ -233,12 +233,12 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
 
   if (isLoading) {
     return (
-      <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full" data-testid="widget-gallery-loading">
+      <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full min-h-[320px]" data-testid="widget-gallery-loading">
         <div className="p-3 flex items-center gap-2 border-b border-card-border">
           <Images className="w-4 h-4 text-primary" />
           <h3 className="font-bold text-card-foreground text-sm">Fotogalerie</h3>
         </div>
-        <div className="aspect-[4/5] bg-muted animate-pulse" />
+        <div className="flex-1 bg-muted animate-pulse min-h-[280px]" />
       </div>
     );
   }
@@ -247,7 +247,7 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
 
   return (
     <>
-      <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col" data-testid="widget-gallery">
+      <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col min-h-[320px]" data-testid="widget-gallery">
         <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
           <Images className="w-4 h-4 text-primary" />
           <h3 className="font-bold text-card-foreground text-sm">Fotogalerie</h3>
diff --git a/client/src/components/recipe-widget.tsx b/client/src/components/recipe-widget.tsx
index 698b42e..6e285a0 100644
--- a/client/src/components/recipe-widget.tsx
+++ b/client/src/components/recipe-widget.tsx
@@ -28,7 +28,7 @@ export function RecipeWidget() {
   return (
     <button
       onClick={() => navigate("/rezepte")}
-      className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
+      className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col min-h-[320px]"
       data-testid="widget-recipe"
     >
       <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
diff --git a/client/src/components/weather-widget.tsx b/client/src/components/weather-widget.tsx
index c66bfd9..14a5f97 100644
--- a/client/src/components/weather-widget.tsx
+++ b/client/src/components/weather-widget.tsx
@@ -200,7 +200,7 @@ export function SidebarWeatherWidget() {
 
   if (loading) {
     return (
-      <div className="bg-card rounded-lg border border-card-border p-4 aspect-square flex items-center justify-center" data-testid="sidebar-weather-loading">
+      <div className="bg-card rounded-lg border border-card-border p-4 min-h-[280px] flex items-center justify-center" data-testid="sidebar-weather-loading">
         <div className="w-full h-full bg-muted animate-pulse rounded" />
       </div>
     );