fix: only fit content for image media

apps/renderer/src/components/ui/media.tsx

@@ -21,6 +21,7 @@ type BaseProps = {
   thumbnail?: boolean
   blurhash?: string
   inline?: boolean
+  fitContent?: boolean
 }
 export type MediaProps = BaseProps &
   (
@@ -62,6 +63,7 @@ const MediaImpl: FC<MediaProps> = ({
     height,
     width,
     inline,
+    fitContent,
     ...rest
   } = props
 
@@ -253,6 +255,7 @@ const MediaImpl: FC<MediaProps> = ({
           height={Number.parseInt(props.height as string)}
           containerWidth={containerWidth}
           noScale={inline}
+          fitContent={fitContent}
         >
           <div className="absolute inset-0 flex items-center justify-center overflow-hidden rounded">
             {blurhash ? (
@@ -306,6 +309,7 @@ const AspectRatio = ({
   children,
   style,
   noScale,
+  fitContent,
   ...props
 }: {
   width: number
@@ -313,10 +317,23 @@ const AspectRatio = ({
   containerWidth?: number
   children: React.ReactNode
   style?: React.CSSProperties
+  /**
+   * Keep the content size for inline image usage
+   */
   noScale?: boolean
+  /**
+   * If `fit` is true, the content width may be increased to fit the container width
+   */
+  fitContent?: boolean
   [key: string]: any
 }) => {
-  const scaleFactor = noScale ? 1 : containerWidth && width ? containerWidth / width : 1
+  const scaleFactor = noScale
+    ? 1
+    : containerWidth && width
+      ? fitContent
+        ? containerWidth / width
+        : Math.min(1, containerWidth / width)
+      : 1
 
   const scaledWidth = width ? width * scaleFactor : undefined
   const scaledHeight = height ? height * scaleFactor : undefined

apps/renderer/src/components/ui/media/SwipeMedia.tsx

@@ -98,6 +98,7 @@ export function SwipeMedia({
                     onPreview?.(uniqMedia, i)
                   }}
                   showFallback={true}
+                  fitContent
                 />
               </SwiperSlide>
             ))}
@@ -135,6 +136,7 @@ export function SwipeMedia({
           height={uniqMedia[0].height}
           width={uniqMedia[0].width}
           blurhash={uniqMedia[0].blurhash}
+          fitContent
         />
       ) : (
         <div className="relative flex aspect-video w-full items-center overflow-hidden rounded-t-2xl border-b">