From 7b07af36acc8774061767692b2c47732477bf7a4 Mon Sep 17 00:00:00 2001
From: Ryota Ikezawa <pavegy@gmail.com>
Date: Sat, 3 Jan 2026 17:50:10 +0900
Subject: [PATCH] fix: Prevent preview panel from overflowing screen width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add min-w-0 to Card component to override grid item's default min-width: auto
- Add overflow-hidden to image container to clip overflowing content

This fixes an issue where large preview images could cause the PreviewPanel
to exceed the viewport width in grid layouts using 1fr columns.

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

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

diff --git a/src/client/components/generators/PreviewPanel.tsx b/src/client/components/generators/PreviewPanel.tsx
index 8b7e318..512693c 100644
--- a/src/client/components/generators/PreviewPanel.tsx
+++ b/src/client/components/generators/PreviewPanel.tsx
@@ -91,7 +91,7 @@ export const PreviewPanel = memo(function PreviewPanel({ url, alt }: PreviewPane
 
   return (
     <>
-      <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
+      <Card className="min-w-0 border-border/50 bg-card/50 backdrop-blur-sm">
         <CardHeader className="pb-4">
           <div className="flex items-center justify-between">
             <CardTitle className="text-lg font-semibold tracking-tight">
@@ -110,7 +110,7 @@ export const PreviewPanel = memo(function PreviewPanel({ url, alt }: PreviewPane
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="flex min-h-[220px] items-center justify-center rounded-xl bg-muted/30 p-4 sm:p-6">
+          <div className="flex min-h-[220px] items-center justify-center overflow-hidden rounded-xl bg-muted/30 p-4 sm:p-6">
             {showEmpty && (
               <div className="flex flex-col items-center gap-3 text-muted-foreground">
                 <ImageIcon className="h-10 w-10 opacity-50" />