Simplify team avatar stack styling

This commit is contained in:
kenny lopez
2026-07-22 17:10:14 -07:00
parent ea89b93093
commit d41e6cc853
2 changed files with 27 additions and 2 deletions
@@ -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}
+24
View File
@@ -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 ({