fix: improve favicon contrast in chat links

Adds a compact themed badge behind link favicons
Prevents favicon badge borders from clipping
Keeps external link icons readable across themes

packages/ui/src/components/chat/MarkdownRendererImpl.tsx

@@ -101,15 +101,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
   }
 
   return (
+    <span className="mr-1 inline-flex size-[18px] items-center justify-center rounded border border-[var(--border)] bg-[var(--interactive-hover)] align-[-0.25em]">
       <img
         src={faviconUrl}
         alt=""
         aria-hidden="true"
         loading="lazy"
         decoding="async"
-      className="mr-1 inline-block size-4 rounded-sm align-[-0.1875em]"
+        className="size-3.5 rounded-sm"
         onError={() => setFailed(true)}
       />
+    </span>
   );
 };
 

packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx

@@ -51,15 +51,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
     }
 
     return (
+        <span className="inline-flex size-[18px] flex-shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--interactive-hover)]">
             <img
                 src={faviconUrl}
                 alt=""
                 aria-hidden="true"
                 loading="lazy"
                 decoding="async"
-            className="size-4 flex-shrink-0 rounded-sm"
+                className="size-3.5 rounded-sm"
                 onError={() => setFailed(true)}
             />
+        </span>
     );
 };