fix(ui): avatar overlap

[canerakdas]

Description

As discussed in the Slack thread;

When there are fewer avatars or when viewed on the blog listing or blog pages, the avatars were not overlapping. With this PR, the issue where the first avatar was getting cut off has been fixed, and now the avatars properly overlap regardless of the number of items

Validation

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 4, 2025 7:54pm

[Copilot]

Pull Request Overview

This PR fixes an avatar overlap issue by removing the expandable condition and updating the CSS to ensure proper spacing between avatars regardless of their count.

• Removed the conditional addition of the "expandable" class in AvatarGroup/index.tsx.
• Updated CSS to use the new "first:ml-0" syntax for adjusting the first avatar's margin.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/ui-components/Common/AvatarGroup/index.tsx	Removed conditional "expandable" class to simplify avatar container rendering.
packages/ui-components/Common/AvatarGroup/index.module.css	Updated margin settings using new CSS syntax "first:ml-0" for consistent avatar overlap.

Comments suppressed due to low confidence (2)

packages/ui-components/Common/AvatarGroup/index.module.css:11

• Please verify that the use of the new CSS syntax 'first:ml-0' is fully supported in all target browsers and build environments to avoid potential compatibility issues.

@apply -ml-2
      first:ml-0;

packages/ui-components/Common/AvatarGroup/index.tsx:45

• Removing the conditional 'expandable' class simplifies the component, but please confirm that this change does not affect the dynamic behavior for different avatar counts, particularly in edge cases with very few or many avatars.

<div className={classNames(styles.avatarGroup, styles[size])}>

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 75.43%. Comparing base (76b9440) to head (4dc3616).
Report is 12 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ackages/ui-components/Common/AvatarGroup/index.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7834      +/-   ##
==========================================
- Coverage   75.47%   75.43%   -0.04%     
==========================================
  Files         101      101              
  Lines        8309     8305       -4     
  Branches      218      218              
==========================================
- Hits         6271     6265       -6     
- Misses       2036     2038       +2     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AugustinMauroy]

LGTM !

[ovflowd]

LGTM! Thank you, Caner! BTW, I'm more than happy to fast-track this if needed, but there's no real rush here.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🔴 73	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟠 83	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗