From 58f1cf1ae2e0cfeb5d915e9c8e8950c8408b6fab Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Mon, 3 Aug 2026 19:49:21 +0800
Subject: [PATCH] fix(canvas): make layout replace dialog responsive

---
 components/canvas/nodes/ImageNode.tsx | 124 +++++++++++++-------------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 7fa51a147..4df396598 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -10184,8 +10184,8 @@ export function ImageNode({
         }}
         open={layoutReplaceDialogOpen}
       >
-        <DialogContent className="sm:max-w-[760px]">
-          <DialogHeader>
+        <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[760px] flex-col gap-0 overflow-hidden p-0 sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] sm:max-w-[760px]">
+          <DialogHeader className="shrink-0 border-b border-slate-200 px-4 py-3 pr-12 text-left sm:px-6 sm:py-4 dark:border-white/10">
             <DialogTitle className="flex items-center gap-2 text-base">
               <LayoutTemplate className="h-4 w-4" />
               排版替换
@@ -10195,74 +10195,76 @@ export function ImageNode({
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label>当前图片</Label>
-              <div className="flex aspect-square items-center justify-center overflow-hidden rounded-lg border border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-zinc-900">
-                {data.src ? (
-                  <img
-                    alt={displayTitle}
-                    className="max-h-full max-w-full object-contain"
-                    draggable={false}
-                    src={buildImageProxyUrl(data.src, { width: 560 })}
-                  />
-                ) : null}
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="min-w-0 space-y-2">
+                <Label>当前图片</Label>
+                <div className="flex h-[clamp(160px,34dvh,340px)] items-center justify-center overflow-hidden rounded-lg border border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-zinc-900">
+                  {data.src ? (
+                    <img
+                      alt={displayTitle}
+                      className="max-h-full max-w-full object-contain"
+                      draggable={false}
+                      src={buildImageProxyUrl(data.src, { width: 560 })}
+                    />
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="min-w-0 space-y-2">
+                <Label htmlFor={`layout-replace-reference-url-${node.id}`}>
+                  参考图
+                </Label>
+                <Input
+                  id={`layout-replace-reference-url-${node.id}`}
+                  onChange={(event) =>
+                    setLayoutReplaceReferenceUrl(event.currentTarget.value)
+                  }
+                  placeholder="https://..."
+                  value={layoutReplaceReferenceUrl}
+                />
+                <Input
+                  accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
+                  disabled={isUploadingLayoutReplaceReference}
+                  onChange={(event) => {
+                    void handleLayoutReplaceReferenceUpload(event);
+                  }}
+                  type="file"
+                />
+                <div className="flex h-[clamp(160px,34dvh,340px)] items-center justify-center overflow-hidden rounded-lg border border-dashed border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-zinc-900">
+                  {isUploadingLayoutReplaceReference ? (
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  ) : isHttpImageUrl(layoutReplaceReferenceUrl.trim()) ? (
+                    <img
+                      alt="排版参考图"
+                      className="max-h-full max-w-full object-contain"
+                      draggable={false}
+                      src={buildImageProxyUrl(layoutReplaceReferenceUrl.trim(), {
+                        width: 560,
+                      })}
+                    />
+                  ) : (
+                    <LayoutTemplate className="h-6 w-6 text-slate-300" />
+                  )}
+                </div>
               </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor={`layout-replace-reference-url-${node.id}`}>
-                参考图
-              </Label>
-              <Input
-                id={`layout-replace-reference-url-${node.id}`}
+            <div className="mt-4 space-y-2">
+              <Label htmlFor={`layout-replace-prompt-${node.id}`}>补充要求</Label>
+              <Textarea
+                className="min-h-[80px] max-h-[180px]"
+                id={`layout-replace-prompt-${node.id}`}
                 onChange={(event) =>
-                  setLayoutReplaceReferenceUrl(event.currentTarget.value)
+                  setLayoutReplacePrompt(event.currentTarget.value)
                 }
-                placeholder="https://..."
-                value={layoutReplaceReferenceUrl}
+                placeholder="可选，只写产品替换细节；不会改写参考图文字、图标和排版"
+                value={layoutReplacePrompt}
               />
-              <Input
-                accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
-                disabled={isUploadingLayoutReplaceReference}
-                onChange={(event) => {
-                  void handleLayoutReplaceReferenceUpload(event);
-                }}
-                type="file"
-              />
-              <div className="flex aspect-square items-center justify-center overflow-hidden rounded-lg border border-dashed border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-zinc-900">
-                {isUploadingLayoutReplaceReference ? (
-                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                ) : isHttpImageUrl(layoutReplaceReferenceUrl.trim()) ? (
-                  <img
-                    alt="排版参考图"
-                    className="max-h-full max-w-full object-contain"
-                    draggable={false}
-                    src={buildImageProxyUrl(layoutReplaceReferenceUrl.trim(), {
-                      width: 560,
-                    })}
-                  />
-                ) : (
-                  <LayoutTemplate className="h-6 w-6 text-slate-300" />
-                )}
-              </div>
             </div>
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor={`layout-replace-prompt-${node.id}`}>补充要求</Label>
-            <Textarea
-              className="min-h-[92px]"
-              id={`layout-replace-prompt-${node.id}`}
-              onChange={(event) =>
-                setLayoutReplacePrompt(event.currentTarget.value)
-              }
-              placeholder="可选，只写产品替换细节；不会改写参考图文字、图标和排版"
-              value={layoutReplacePrompt}
-            />
-          </div>
-
-          <DialogFooter>
+          <DialogFooter className="shrink-0 gap-2 border-t border-slate-200 bg-background px-4 py-3 sm:px-6 dark:border-white/10">
             <Button
               disabled={isSubmittingLayoutReplace}
               onClick={() => setLayoutReplaceDialogOpen(false)}