From 60fa4607f22f2e7fa18e78aafd977fa7b7a5cd96 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 7 Sep 2026 21:44:04 +0000
Subject: [PATCH 1/4] fix(dashboard): drop hardcoded white ring from member
 avatars

The avatar stack in UserGroup drew a `ring-2 ring-surface-white` on each
Avatar to fake separation across the negative overlap. The colour is
hardcoded, so it read as an odd border on the hover-tinted team rows and
on dark surfaces. Replace the overlap and ring with a plain gap so the
avatars use frappe-ui's own colours only.

frappe-ui 1.0.0-beta.55 ships no AvatarGroup component, so the stack
stays hand-rolled.

Closes #431

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kQ1Dp7xRj9mVNuYGeVYB2
---
 dashboard/src/components/common/UserGroup.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/dashboard/src/components/common/UserGroup.vue b/dashboard/src/components/common/UserGroup.vue
index 6f37c032..b19d20ed 100644
--- a/dashboard/src/components/common/UserGroup.vue
+++ b/dashboard/src/components/common/UserGroup.vue
@@ -24,15 +24,13 @@ const label = computed(() =>
 
 <template>
 	<div class="flex items-center gap-2">
-		<!-- Overlap needs a margin; the row's gap alone would spread the stack apart. -->
-		<div v-if="shown.length" class="flex shrink-0 -space-x-1.5" aria-hidden="true">
+		<div v-if="shown.length" class="flex shrink-0 gap-1" aria-hidden="true">
 			<Avatar
 				v-for="user in shown"
 				:key="user.user ?? user.full_name ?? ''"
 				size="sm"
 				:image="user.user_image ?? undefined"
 				:label="user.full_name ?? user.user ?? ''"
-				class="ring-2 ring-surface-white"
 			/>
 		</div>
 		<span class="truncate text-base text-ink-gray-6">{{ label }}</span>

From c0c6debf20dc56c906df38ced0a6a3811d99ba6e Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 13:13:54 +0530
Subject: [PATCH 2/4] fix(dashboard): make the member avatar ring a real colour

`UserGroup` drew `ring-2 ring-surface-white` on each `Avatar` to separate the
overlapping stack, but that utility never compiled: the frappe-ui Tailwind
plugin extends `ringColor` with only `outline` and `outline-alpha`, and its
colour palette has no `surface-*` keys. The avatars overlapped with no gap at
all.

Keep the overlap and point the ring at the CSS variables instead, tracking the
row's hover tint so the separation holds on both the resting and hovered row.
---
 dashboard/src/components/common/UserGroup.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/common/UserGroup.vue b/dashboard/src/components/common/UserGroup.vue
index b19d20ed..e7ae1e65 100644
--- a/dashboard/src/components/common/UserGroup.vue
+++ b/dashboard/src/components/common/UserGroup.vue
@@ -24,13 +24,15 @@ const label = computed(() =>
 
 <template>
 	<div class="flex items-center gap-2">
-		<div v-if="shown.length" class="flex shrink-0 gap-1" aria-hidden="true">
+		<!-- Overlap needs a margin; the row's gap alone would spread the stack apart. -->
+		<div v-if="shown.length" class="flex shrink-0 -space-x-1.5" aria-hidden="true">
 			<Avatar
 				v-for="user in shown"
 				:key="user.user ?? user.full_name ?? ''"
 				size="sm"
 				:image="user.user_image ?? undefined"
 				:label="user.full_name ?? user.user ?? ''"
+				class="ring-2 ring-[--surface-base] group-hover:ring-[--surface-gray-1]"
 			/>
 		</div>
 		<span class="truncate text-base text-ink-gray-6">{{ label }}</span>

From 2e84b47600460b8c8d516d88480cd3b989124168 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 15:21:21 +0530
Subject: [PATCH 3/4] fix(dashboard): drop the ring from the member avatar
 stack

The ring only existed to separate the overlapping avatars, and the overlap
only existed because the ring supplied the edge. Drop both and space the
avatars with a plain `gap-1`, so the stack carries no surface colour of its
own and no longer depends on what the row behind it is tinted.
---
 dashboard/src/components/common/UserGroup.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/dashboard/src/components/common/UserGroup.vue b/dashboard/src/components/common/UserGroup.vue
index e7ae1e65..b19d20ed 100644
--- a/dashboard/src/components/common/UserGroup.vue
+++ b/dashboard/src/components/common/UserGroup.vue
@@ -24,15 +24,13 @@ const label = computed(() =>
 
 <template>
 	<div class="flex items-center gap-2">
-		<!-- Overlap needs a margin; the row's gap alone would spread the stack apart. -->
-		<div v-if="shown.length" class="flex shrink-0 -space-x-1.5" aria-hidden="true">
+		<div v-if="shown.length" class="flex shrink-0 gap-1" aria-hidden="true">
 			<Avatar
 				v-for="user in shown"
 				:key="user.user ?? user.full_name ?? ''"
 				size="sm"
 				:image="user.user_image ?? undefined"
 				:label="user.full_name ?? user.user ?? ''"
-				class="ring-2 ring-[--surface-base] group-hover:ring-[--surface-gray-1]"
 			/>
 		</div>
 		<span class="truncate text-base text-ink-gray-6">{{ label }}</span>

From ae45eb37f31186b76575ebd7fddc5768693154b9 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 15:28:39 +0530
Subject: [PATCH 4/4] fix(dashboard): drop the ring and give the teams row more
 room
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ring drawn on each stacked avatar never rendered: the frappe-ui Tailwind
plugin extends `ringColor` with only `outline` and `outline-alpha`, and its
colour palette has no `surface-*` keys, so `ring-surface-white` compiled to
nothing. Remove it rather than pick a new colour — the overlap reads fine
without an edge, and the stack then carries no surface colour to mismatch the
row's hover tint.

Shrink the member count to `text-sm`, widen the members column and indent the
grid so the team logo no longer sits flush against the panel edge.
---
 dashboard/src/components/common/UserGroup.vue           | 4 ++--
 dashboard/src/components/dashboard/teams/TeamsPanel.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/components/common/UserGroup.vue b/dashboard/src/components/common/UserGroup.vue
index b19d20ed..2b600f20 100644
--- a/dashboard/src/components/common/UserGroup.vue
+++ b/dashboard/src/components/common/UserGroup.vue
@@ -24,7 +24,7 @@ const label = computed(() =>
 
 <template>
 	<div class="flex items-center gap-2">
-		<div v-if="shown.length" class="flex shrink-0 gap-1" aria-hidden="true">
+		<div v-if="shown.length" class="flex shrink-0 -space-x-1.5" aria-hidden="true">
 			<Avatar
 				v-for="user in shown"
 				:key="user.user ?? user.full_name ?? ''"
@@ -33,6 +33,6 @@ const label = computed(() =>
 				:label="user.full_name ?? user.user ?? ''"
 			/>
 		</div>
-		<span class="truncate text-base text-ink-gray-6">{{ label }}</span>
+		<span class="truncate text-sm text-ink-gray-6">{{ label }}</span>
 	</div>
 </template>
diff --git a/dashboard/src/components/dashboard/teams/TeamsPanel.vue b/dashboard/src/components/dashboard/teams/TeamsPanel.vue
index a8075f17..e058c3c7 100644
--- a/dashboard/src/components/dashboard/teams/TeamsPanel.vue
+++ b/dashboard/src/components/dashboard/teams/TeamsPanel.vue
@@ -8,7 +8,7 @@ import ManageTeamPanel from "@/components/dashboard/teams/ManageTeamPanel.vue"
 import { teams } from "@/data/teams"
 import type { TeamOption } from "@/types"
 
-const COLUMNS = "grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_1.5rem] items-center gap-4"
+const COLUMNS = "grid grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)_1.5rem] items-center gap-4 pl-3"
 
 const search = ref("")
 const managing = ref<TeamOption | null>(null)