style: resize images and videos for better visuals

src/components/WebPreview/index.tsx

@@ -4,15 +4,7 @@ import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useMemo } from 'react'
 import Image from '../Image'
 
-export default function WebPreview({
-  url,
-  className,
-  size = 'normal'
-}: {
-  url: string
-  className?: string
-  size?: 'normal' | 'small'
-}) {
+export default function WebPreview({ url, className }: { url: string; className?: string }) {
   const { isSmallScreen } = useScreenSize()
   const { title, description, image } = useFetchWebMetadata(url)
   const hostname = useMemo(() => {
@@ -56,20 +48,14 @@ export default function WebPreview({
       {image && (
         <Image
           image={{ url: image }}
-          className={`rounded-lg aspect-[4/3] xl:aspect-video object-cover bg-foreground ${size === 'normal' ? 'h-44' : 'h-24'}`}
+          className="rounded-lg aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"
           hideIfError
         />
       )}
       <div className="flex-1 w-0 p-2">
         <div className="text-xs text-muted-foreground">{hostname}</div>
-        <div className={`font-semibold ${size === 'normal' ? 'line-clamp-2' : 'line-clamp-1'}`}>
-          {title}
-        </div>
-        <div
-          className={`text-xs text-muted-foreground ${size === 'normal' ? 'line-clamp-5' : 'line-clamp-2'}`}
-        >
-          {description}
-        </div>
+        <div className="font-semibold line-clamp-2">{title}</div>
+        <div className="text-xs text-muted-foreground line-clamp-5">{description}</div>
       </div>
     </div>
   )