From d41e6cc8538f1007c7f0dc4a2d8d410584649c61 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Wed, 22 Jul 2026 17:10:14 -0700
Subject: [PATCH] Simplify team avatar stack styling

---
 .../features/agents/ui/TeamIdentityCard.tsx   |  5 ++--
 desktop/tests/e2e/agents.spec.ts              | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/desktop/src/features/agents/ui/TeamIdentityCard.tsx b/desktop/src/features/agents/ui/TeamIdentityCard.tsx
index b7d71c6a4..19596b76d 100644
--- a/desktop/src/features/agents/ui/TeamIdentityCard.tsx
+++ b/desktop/src/features/agents/ui/TeamIdentityCard.tsx
@@ -147,7 +147,7 @@ function TeamAvatarRow({
             className={visiblePersonas.length > 0 ? "-ml-5" : ""}
             style={{ zIndex: stackItemCount }}
           >
-            <span className="flex h-14 w-14 items-center justify-center rounded-full border-[3px] border-background bg-card text-sm font-semibold text-muted-foreground shadow-sm">
+            <span className="flex h-14 w-14 items-center justify-center rounded-full bg-card text-sm font-semibold text-muted-foreground">
               +{overflowCount}
             </span>
           </div>
@@ -184,13 +184,14 @@ function TeamAvatarItem({
       {avatarUrl ? (
         <ProfileAvatar
           avatarUrl={avatarUrl}
-          className="h-full w-full border-[3px] border-background bg-muted shadow-sm"
+          className="h-full w-full bg-muted shadow-none"
           iconClassName="h-6 w-6"
           label={persona.displayName}
           testId={`team-member-avatar-${persona.id}`}
         />
       ) : (
         <IdentityInitialsAvatar
+          className="border-0 shadow-none"
           colorIndex={index}
           label={persona.displayName}
           size={56}
diff --git a/desktop/tests/e2e/agents.spec.ts b/desktop/tests/e2e/agents.spec.ts
index 0ffdf21e1..df7713266 100644
--- a/desktop/tests/e2e/agents.spec.ts
+++ b/desktop/tests/e2e/agents.spec.ts
@@ -420,6 +420,7 @@ test("team cards use the thread-style overlapping avatar stack", async ({
   await installMockBridge(page, {
     personas: [
       {
+        avatarUrl: "/onboarding/starter-team/fizz.png",
         id: personaIds[0],
         displayName: "Design",
         systemPrompt: "You design interfaces.",
@@ -461,6 +462,29 @@ test("team cards use the thread-style overlapping avatar stack", async ({
   expect(boxes[2]?.left).toBeLessThan(boxes[1]?.right ?? 0);
   await expect(avatars.first()).not.toHaveCSS("mask-image", "none");
   await expect(avatars.last()).toHaveCSS("mask-image", "none");
+  const avatarSurfaceStyles = await avatars
+    .locator(":scope > *")
+    .evaluateAll((elements) =>
+      elements.map((element) => {
+        const styles = getComputedStyle(element);
+        const hasVisibleShadow = [
+          ...styles.boxShadow.matchAll(/rgba?\(([^)]+)\)/g),
+        ].some((match) => {
+          if (match[0].startsWith("rgb(")) return true;
+          const channels = match[1]?.split(/[\s,/]+/).filter(Boolean) ?? [];
+          return Number(channels.at(-1)) > 0;
+        });
+        return {
+          borderWidth: styles.borderTopWidth,
+          hasVisibleShadow,
+        };
+      }),
+    );
+  expect(avatarSurfaceStyles).toEqual([
+    { borderWidth: "0px", hasVisibleShadow: false },
+    { borderWidth: "0px", hasVisibleShadow: false },
+    { borderWidth: "0px", hasVisibleShadow: false },
+  ]);
 });
 
 test("agent defaults stays in the header without an actions menu", async ({