From e0a194eed01612da36b1a7b56c0138895c6fb679 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 19 May 2026 14:01:35 +0300
Subject: [PATCH] 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
---
 .../components/chat/MarkdownRendererImpl.tsx  | 20 ++++++++++---------
 .../chat/message/parts/ProgressiveGroup.tsx   | 20 ++++++++++---------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
index e19bf95b..71af4a9e 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
@@ -101,15 +101,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
   }
 
   return (
-    <img
-      src={faviconUrl}
-      alt=""
-      aria-hidden="true"
-      loading="lazy"
-      decoding="async"
-      className="mr-1 inline-block size-4 rounded-sm align-[-0.1875em]"
-      onError={() => setFailed(true)}
-    />
+    <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="size-3.5 rounded-sm"
+        onError={() => setFailed(true)}
+      />
+    </span>
   );
 };
 
diff --git a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
index 78e0e1b6..929e1cbe 100644
--- a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
+++ b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
@@ -51,15 +51,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
     }
 
     return (
-        <img
-            src={faviconUrl}
-            alt=""
-            aria-hidden="true"
-            loading="lazy"
-            decoding="async"
-            className="size-4 flex-shrink-0 rounded-sm"
-            onError={() => setFailed(true)}
-        />
+        <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-3.5 rounded-sm"
+                onError={() => setFailed(true)}
+            />
+        </span>
     );
 };