fix(mobile): border + className passthrough on WorkspaceAvatar logo branch (#3849)

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>
This commit is contained in:
Bohan Jiang
2026-06-06 23:04:49 +08:00
committed by GitHub
parent d9e6d7807b
commit 83ac61e2a1

View File

@@ -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>
);
}