From 83ac61e2a12c1d0a3e214d9ff83226266e732d71 Mon Sep 17 00:00:00 2001
From: Bohan Jiang <52446949+Bohan-J@users.noreply.github.com>
Date: Sat, 6 Jun 2026 23:04:49 +0800
Subject: [PATCH] fix(mobile): border + className passthrough on
 WorkspaceAvatar logo branch (#3849)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The logo (resolved avatar_url) branch was missing the border the fallback
tile and web's <img> carry, and didn't thread the className prop. NativeWind
has no cssInterop for expo-image, so className/border on <ExpoImage> is
silently dropped — wrap the logo in an overflow-hidden View that carries
border border-border + className (the same pattern lib/markdown/markdown-image.tsx
uses to border/round an expo-image). Both branches now match web parity.

Follow-up to #3839. MUL-3096

Co-authored-by: J <agent-j@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 .../components/workspace/workspace-avatar.tsx | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/components/workspace/workspace-avatar.tsx b/apps/mobile/components/workspace/workspace-avatar.tsx
index 9b135b4f6..f6cb60f5b 100644
--- a/apps/mobile/components/workspace/workspace-avatar.tsx
+++ b/apps/mobile/components/workspace/workspace-avatar.tsx
@@ -9,6 +9,14 @@
  * core's resolvePublicFileUrl — because avatar_url comes back as a server-
  * relative path on self-hosted backends without a CDN signer, which RN's
  * <Image> can't load without an absolute origin.
+ *
+ * Both branches render a `border border-border` tile and thread `className`
+ * through, matching web's <img>/<span> (both carry `border` + `className`).
+ * The logo sits inside an overflow-hidden View rather than styling the
+ * <ExpoImage> directly: NativeWind has no cssInterop for expo-image, so
+ * className/border utilities are silently dropped on <ExpoImage>. The wrapper
+ * View is how the rest of the app borders/rounds an expo-image — see
+ * lib/markdown/markdown-image.tsx.
  */
 import { View } from "react-native";
 import { Image as ExpoImage } from "expo-image";
@@ -32,12 +40,17 @@ export function WorkspaceAvatar({
 
   if (resolved) {
     return (
-      <ExpoImage
-        source={{ uri: resolved }}
-        contentFit="cover"
-        accessibilityLabel={name}
+      <View
+        className={cn("overflow-hidden border border-border", className)}
         style={{ width: size, height: size, borderRadius }}
-      />
+      >
+        <ExpoImage
+          source={{ uri: resolved }}
+          contentFit="cover"
+          accessibilityLabel={name}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </View>
     );
   }