fix(dashboard): drop the hardcoded ring from the member avatar stack

[harshtandiya]

What changed

UserGroup drew a hardcoded ring-2 ring-surface-white on each Avatar to fake separation across its negative overlap (-space-x-1.5). Because the colour was fixed white it read as an odd border on the hover-tinted team rows and on dark surfaces — TeamsPanel.vue:61 puts the group on a row with hover:bg-surface-gray-1, which the white ring visibly mismatched.

The overlap and the ring are replaced with a plain gap-1, so the avatars now use frappe-ui's own colours and no hardcoded surface token. Public props (users, max), the max-slicing, the __() "N members" label and aria-hidden on the decorative stack are all unchanged.

Closes #431

Two things for you to decide

1. There is no AvatarGroup in frappe-ui. The issue asks to "stick to frappe ui avatar group", but frappe-ui@1.0.0-beta.55 (what dashboard/package.json pins) exports only Avatar — src/components/Avatar/index.ts exports Avatar and its types, nothing else. Verified against the installed package and the published tarballs for 1.0.0-beta.55, 1.0.0-beta.56 and 0.1.278; none contains an AvatarGroup. So the stack necessarily stays hand-rolled here.

That leaves an open choice this PR takes the simpler side of:

• as written — a spaced row (gap-1), no ring, no overlap;
• the alternative — keep the overlapping stack and swap the ring to ring-surface-base. Worth knowing that surface-white is a retired token: frappe-ui's tailwind/migrate-tokens-v2.js maps surface-white → surface-base, and this codebase has largely migrated already, so the old ring was a stale token as well as a visual bug. A surface-base ring would still mismatch on the row's hover tint, though, which is why the spaced row won here.

If you specifically wanted the overlapping-stack look, say so and it's a small follow-up — either a local AvatarGroup component or an upstream contribution to frappe-ui.

2. "and colors" — Avatar takes a theme prop (gray|blue|green|amber|red|violet) for fallback initials, and UserGroup passes none, so every fallback is the default gray. If the issue meant per-user coloured initials, that's a deliberate feature rather than a bug fix and isn't in this PR. Happy to add it.

Other call sites

Grepped ring- across dashboard/src — 5 hits, and UserGroup.vue was the only one on an Avatar. The rest are legitimate and untouched: a selected-filter chip outline (FilterBar.vue:86), two checkbox focus:ring-* (CancellationRequestDialog.vue), and a focus-visible:ring-2 (EventDetails.vue:201).

Demo

No screenshot — the dashboard needs a running Frappe site, unavailable in the environment this was written in. Given this is a purely visual change, and given the open choice above, it genuinely needs a look before merge.

Testing

node_modules was installed and the checks genuinely ran:

• yarn lint (oxlint --deny-warnings) — passed
• yarn typecheck — passed
• yarn fmt:check (oxfmt, 318 files) — passed

---

Generated by Claude Code