fix: media fallback src overflow

Signed-off-by: Innei <[email protected]>

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

@@ -213,7 +213,7 @@ const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, classNam
       className={cn(
         !(props.width || props.height) && "size-full",
         "center rounded bg-zinc-100 dark:bg-neutral-900",
-        "not-prose !flex max-h-full flex-col space-y-1 p-4",
+        "not-prose !flex max-h-full flex-col space-y-1 p-4 @container",
 
         mediaContainerClassName,
       )}
@@ -222,14 +222,16 @@ const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, classNam
         width: props.width ? `${props.width}px` : "100%",
       }}
     >
-      <i className="i-mgc-close-cute-re text-xl text-red-500" />
-      <p>Media loaded failed</p>
-      <div className="space-x-1 break-all px-4 text-sm">
-        Go to{" "}
-        <a href={props.src} target="_blank" rel="noreferrer" className="follow-link--underline">
-          {props.src}
-        </a>
-        <i className="i-mgc-external-link-cute-re translate-y-px" />
+      <div className="hidden @sm:hidden @md:contents">
+        <i className="i-mgc-close-cute-re text-xl text-red-500" />
+        <p>Media loaded failed</p>
+        <div className="space-x-1 break-all px-4 text-sm">
+          Go to{" "}
+          <a href={props.src} target="_blank" rel="noreferrer" className="follow-link--underline">
+            original media url
+          </a>
+          <i className="i-mgc-external-link-cute-re translate-y-0.5" />
+        </div>
       </div>
     </div>
   </div>