fix: set image view max-w

Signed-off-by: Innei <i@innei.in>
Innei · Feb 2, 2024 · 32f076c · 32f076c
1 parent c7c1fc0
commit 32f076c
Show file tree

Hide file tree

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