fix(dashboard): drop the ring and give the teams row more room - #445
Merged
Conversation
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
`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.
harshtandiya
changed the title
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.
harshtandiya
changed the title
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.
harshtandiya
changed the title
harshtandiya
marked this pull request as ready for review
September 8, 2026 10:01
Contributor
Greptile SummaryThis PR refines the teams dashboard layout by removing ineffective avatar ring classes, reducing the member-count text size, widening the members column, and consistently indenting the shared header-and-row grid.
Confidence Score: 5/5The PR appears safe to merge because the styling changes preserve layout alignment and introduce no established functional or security regressions. No blocking or actionable issues remain; the flexible grid tracks can shrink safely, headers and rows share the same alignment classes, and removing ring utilities that never compiled does not alter existing rendered behavior.
|
| Filename | Overview |
|---|---|
| dashboard/src/components/common/UserGroup.vue | Removes non-compiling avatar ring utilities and adjusts the member-count label to secondary text sizing without changing behavior. |
| dashboard/src/components/dashboard/teams/TeamsPanel.vue | Widens the members track and applies matching left padding to the shared header and team-row grid. |
Reviews (2): Last reviewed commit: "Merge branch 'develop' into fix/431-avat..." | Re-trigger Greptile
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
UserGroup'sring-2 ring-surface-whitenever compiled — frappe-ui's Tailwind plugin extendsringColorwith onlyoutline/outline-alpha(tailwind/plugin.js:281) and its palette has nosurface-*keys, so the class emitted nothing.-space-x-1.5overlap reads fine with no edge, and the stack now carries no surface colour to mismatchTeamsPanel.vue'shover:bg-surface-gray-1row or dark surfaces.text-sm, the members column widens tominmax(0,1.4fr), andpl-3on the sharedCOLUMNSgrid indents header and rows together so the team logo isn't flush to the panel edge.max-slicing, the "N members" label andaria-hiddenare unchanged;yarn lint,typecheckandfmt:checkpass.Closes #431