fix: Prevent PatternCanvas overflow on small screens

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

@@ -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 && (