Avatar made mobile responsive

[mehkanarshad]

Description

Fixes avatar grid overflow on mobile by making the grid responsive and constraining avatar button sizing to prevent layout breakage on small screens.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Tested locally using Chrome DevTools mobile viewports (iPhone SE, iPhone 12) and desktop browser. Verified that the avatar grid no longer overflows its container and remains visually consistent and tappable across screen sizes.

Screenshots

N/A (UI-only change tested locally)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Additional Information

The issue was caused by a fixed 5-column grid combined with large emoji sizes, which resulted in overflow on smaller screens. The fix uses a responsive grid layout and fixed aspect-ratio avatar buttons to maintain proper alignment on mobile devices.

Learning Outcomes

Learned how emoji sizing and fixed grid layouts can impact mobile responsiveness, and how responsive grids and aspect-ratio constraints help prevent UI overflow issues.