From b3a15499277518c70db7c0ff1391a57a57f55971 Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Mon, 5 Oct 2026 07:04:23 +0200
Subject: [PATCH] fix(mobile): account badges no longer clip wide initials like
 WO

The badge is absolutely positioned inside a 14pt provider icon, and React
Native caps an absolute child at its parent's width, so initials wider than
the icon wrap and clip ("WO" shows as "W("). A right-aligned 32pt box
around the badge lets it size to its initials at the same position.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/mobile/src/components/ProviderIcon.tsx | 50 +++++++++++----------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/apps/mobile/src/components/ProviderIcon.tsx b/apps/mobile/src/components/ProviderIcon.tsx
index 964c60ebcbe2..a8ac6eeb6598 100644
--- a/apps/mobile/src/components/ProviderIcon.tsx
+++ b/apps/mobile/src/components/ProviderIcon.tsx
@@ -177,34 +177,38 @@ export function ProviderInstanceIcon(props: {
         <ProviderIcon iconUrl={props.iconUrl} provider={props.provider} size={props.size} />
       </View>
       {props.showBadge ? (
+        // A wide right-aligned box lets the badge fit its initials. Alone, an
+        // absolute badge is capped at the icon's width, which clips "WO".
         <View
-          className={props.accentColor ? undefined : "bg-card"}
-          style={{
-            position: "absolute",
-            right: -3,
-            bottom: -3,
-            height: 12,
-            minWidth: 12,
-            paddingHorizontal: 2,
-            borderRadius: 999,
-            borderWidth: 1,
-            borderColor: props.surfaceColor,
-            backgroundColor: props.accentColor,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
+          pointerEvents="none"
+          style={{ position: "absolute", right: -3, bottom: -3, width: 32, alignItems: "flex-end" }}
         >
-          <Text
-            className={props.accentColor ? undefined : "text-foreground-muted"}
+          <View
+            className={props.accentColor ? undefined : "bg-card"}
             style={{
-              fontSize: 7,
-              fontWeight: "600",
-              lineHeight: 9,
-              color: props.accentColor ? "#ffffff" : undefined,
+              height: 12,
+              minWidth: 12,
+              paddingHorizontal: 2,
+              borderRadius: 999,
+              borderWidth: 1,
+              borderColor: props.surfaceColor,
+              backgroundColor: props.accentColor,
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            {providerInstanceInitials(props.displayName)}
-          </Text>
+            <Text
+              className={props.accentColor ? undefined : "text-foreground-muted"}
+              style={{
+                fontSize: 7,
+                fontWeight: "600",
+                lineHeight: 9,
+                color: props.accentColor ? "#ffffff" : undefined,
+              }}
+            >
+              {providerInstanceInitials(props.displayName)}
+            </Text>
+          </View>
         </View>
       ) : null}
     </View>