From 32f076cc1a6b1223a1457c3a5a6db3ecbec025e3 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 3 Feb 2024 00:37:00 +0800
Subject: [PATCH] fix: set image view max-w

Signed-off-by: Innei <i@innei.in>
---
 src/components/ui/editor/Milkdown/plugins/Image.tsx | 6 +++++-
 src/components/ui/image/ZoomedImage.tsx             | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/editor/Milkdown/plugins/Image.tsx b/src/components/ui/editor/Milkdown/plugins/Image.tsx
index cb744b6f1d..cfd66d2889 100644
--- a/src/components/ui/editor/Milkdown/plugins/Image.tsx
+++ b/src/components/ui/editor/Milkdown/plugins/Image.tsx
@@ -61,7 +61,11 @@ const Image = () => {
   return (
     <div className="my-4 flex center">
       <div className="group relative inline-block">
-        <FixedZoomedImage src={src} containerWidth={isMobile ? 450 : 600} />
+        <FixedZoomedImage
+          className="max-h-[80vh]"
+          src={src}
+          containerWidth={isMobile ? 450 : 600}
+        />
 
         <div className="absolute bottom-1 left-1 z-[10] opacity-0 duration-200 group-hover:opacity-100">
           <StyledButton
diff --git a/src/components/ui/image/ZoomedImage.tsx b/src/components/ui/image/ZoomedImage.tsx
index 70c4f9872f..d1c1d61231 100644
--- a/src/components/ui/image/ZoomedImage.tsx
+++ b/src/components/ui/image/ZoomedImage.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import mediumZoom from 'medium-zoom'
 import Image from 'next/image'
@@ -61,6 +62,7 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
   placeholder,
   height,
   width,
+  className,
 }) => {
   const [zoomer_] = useState(() => {
     if (isServerSide) return null!
@@ -134,7 +136,7 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
             onError={() => setImageLoadStatusSafe(ImageLoadStatus.Error)}
             className={styles({
               status: imageLoadStatus,
-              className: imageStyles[ImageLoadStatus.Loaded],
+              className: clsx(imageStyles[ImageLoadStatus.Loaded], className),
             })}
             onAnimationEnd={(e: Event) => {
               if (ImageLoadStatus.Loaded) {