From a0cb6d18223f6f79c359b8e09f712eafe6aa3b11 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sun, 21 Dec 2025 13:32:13 +0100
Subject: [PATCH] fix: Prevent PatternCanvas overflow on small screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace fixed height values with flexbox sizing to prevent canvas overflow
when the window height is constrained.

Changes:
- Replace h-[400px] sm:h-[500px] lg:flex-1 with flex-1 on all screen sizes
- Add min-h-0 to CardContent and canvas container for proper flex shrinking
- Canvas now properly respects card boundaries on all screen sizes

The flex-1 min-h-0 pattern ensures the canvas takes available space without
overflowing its parent card, regardless of viewport size.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/PatternCanvas.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx
index 249784d..7fe875b 100644
--- a/src/components/PatternCanvas.tsx
+++ b/src/components/PatternCanvas.tsx
@@ -283,9 +283,9 @@ export function PatternCanvas() {
           </div>
         </div>
       </CardHeader>
-      <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col">
+      <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col min-h-0">
         <div
-          className="relative w-full h-[400px] sm:h-[500px] lg:flex-1 lg:min-h-0 border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden"
+          className="relative w-full flex-1 min-h-0 border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden"
           ref={containerRef}
         >
           {containerSize.width > 0 && (