fix(dashboard): drop the ring and give the teams row more room (#445)

* 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

* 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.

* 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.

* fix(dashboard): drop the ring and give the teams row more room

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.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: harshtandiya

dashboard/src/components/common/UserGroup.vue

@@ -24,17 +24,15 @@ 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">
 			<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>
+		<span class="truncate text-sm text-ink-gray-6">{{ label }}</span>
 	</div>
 </template>

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)