From 0fb92a50154e549be566fb6f4dd22635dd44136c Mon Sep 17 00:00:00 2001
From: Exotic209093 <134711311+Exotic209093@users.noreply.github.com>
Date: Sun, 13 Sep 2026 19:06:31 +0100
Subject: [PATCH] fix(web): prevent initials badge from obscuring provider icon
 at small sizes

Fixes #11562
---
 .../chat/ProviderInstanceIcon.test.tsx        | 37 +++++++++++++++++++
 .../components/chat/ProviderInstanceIcon.tsx  |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/chat/ProviderInstanceIcon.test.tsx

diff --git a/apps/web/src/components/chat/ProviderInstanceIcon.test.tsx b/apps/web/src/components/chat/ProviderInstanceIcon.test.tsx
new file mode 100644
index 00000000000..f6c14ca8273
--- /dev/null
+++ b/apps/web/src/components/chat/ProviderInstanceIcon.test.tsx
@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
+
+describe("ProviderInstanceIcon", () => {
+  it("positions the initials badge with negative offsets so it does not obscure small provider icons", () => {
+    const markup = renderToStaticMarkup(
+      <ProviderInstanceIcon
+        driverKind="codex"
+        displayName="Test User"
+        showBadge
+        className="size-4"
+        iconClassName="size-4"
+      />,
+    );
+
+    expect(markup).toContain("-right-0.5");
+    expect(markup).toContain("-bottom-0.5");
+    expect(markup).not.toMatch(/(?<!-)right-0(?!\.)/);
+    expect(markup).not.toMatch(/(?<!-)bottom-0(?!\.)/);
+  });
+
+  it("omits the badge when showBadge is false", () => {
+    const markup = renderToStaticMarkup(
+      <ProviderInstanceIcon
+        driverKind="codex"
+        displayName="Test User"
+        className="size-4"
+        iconClassName="size-4"
+      />,
+    );
+
+    expect(markup).not.toContain("-right-0.5");
+    expect(markup).not.toContain("-bottom-0.5");
+  });
+});
\ No newline at end of file
diff --git a/apps/web/src/components/chat/ProviderInstanceIcon.tsx b/apps/web/src/components/chat/ProviderInstanceIcon.tsx
index 53c66667f93..5839c1a6d79 100644
--- a/apps/web/src/components/chat/ProviderInstanceIcon.tsx
+++ b/apps/web/src/components/chat/ProviderInstanceIcon.tsx
@@ -62,7 +62,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
       {props.showBadge ? (
         <span
           className={cn(
-            "pointer-events-none absolute right-0 bottom-0 z-10 flex h-3.5 min-w-3.5 items-center justify-center rounded-full border px-0.5 text-[8px] font-semibold leading-none shadow-sm",
+            "pointer-events-none absolute -right-0.5 -bottom-0.5 z-10 flex h-3.5 min-w-3.5 items-center justify-center rounded-full border px-0.5 text-[8px] font-semibold leading-none shadow-sm",
             props.accentColor
               ? "bg-[var(--provider-accent)] text-white"
               : "bg-card text-muted-foreground",