fix: sd image preview modal size

OpenAI-Next · Jul 12, 2024 · dd10301 · dd10301
1 parent d61cb98
commit dd10301
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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>
     ),