From dd1030139bcc0108ca1dceec1bb2baafb0da776b Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Fri, 12 Jul 2024 15:20:09 +0800
Subject: [PATCH] fix: sd image preview modal size

---
 app/components/sd.tsx     |  6 ++++++
 app/components/ui-lib.tsx | 25 +++++++++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 6f3acde96..cc0e326e3 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -167,6 +167,12 @@ export function Sd() {
                         showImageModal(
                           getBase64ImgUrl(item.img_data, "image/png"),
                           true,
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { maxWidth: "100%", maxHeight: "100%" },
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { width: "100%", height: "100%" },
                         );
                       }}
                     />
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 9d17672fa..27555105a 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -13,7 +13,13 @@ import MinIcon from "../icons/min.svg";
 import Locale from "../locales";
 
 import { createRoot } from "react-dom/client";
-import React, { HTMLProps, MouseEvent, useEffect, useState } from "react";
+import React, {
+  CSSProperties,
+  HTMLProps,
+  MouseEvent,
+  useEffect,
+  useState,
+} from "react";
 import { IconButton } from "./button";
 
 export function Popover(props: {
@@ -425,18 +431,25 @@ export function showPrompt(content: any, value = "", rows = 3) {
   });
 }
 
-export function showImageModal(img: string, defaultMax?: boolean) {
+export function showImageModal(
+  img: string,
+  defaultMax?: boolean,
+  style?: CSSProperties,
+  boxStyle?: CSSProperties,
+) {
   showModal({
     title: Locale.Export.Image.Modal,
     defaultMax: defaultMax,
     children: (
-      <div style={{ display: "flex", justifyContent: "center" }}>
+      <div style={{ display: "flex", justifyContent: "center", ...boxStyle }}>
         <img
           src={img}
           alt="preview"
-          style={{
-            maxWidth: "100%",
-          }}
+          style={
+            style ?? {
+              maxWidth: "100%",
+            }
+          }
         ></img>
       </div>
     ),