Avatar > Reverse stack order
Problem
The current stacked order of avatars places the last item at the very bottom. Since this can be an interactive badge I think the order should be reversed. Also, the stacking order infers who was added when. If someone was added later, it makes sense that their avatar is set on top of the one before.
Solution
Continue to order the avatars from left to right, but as they're ordered from left to right, they should stack from bottom to top. This allows the badge (if present) to be the most visible item and have the largest click target when interactive.
When DOM order and z-index is considered I believe this is a more natural presentation too.
Before | After |
---|---|
View proposal in Figma → (Note: this was a separate file and not a branch because it's only changing instances and not a component or styles.)