Bug : Avatar Modal not responsive on mobile devices

// ... and ~7 more instances for Eyes, Cheek, Face, Hair styles, etc.
```

## Expected Behavior

The avatar selection grids should adapt to screen size:
- **Mobile (< 640px):** 3 columns
- **Tablet (640px - 768px):** 4 columns
- **Desktop (> 768px):** 5 columns

## Suggested Fix

Replace all instances of:
```tsx
className='grid grid-cols-5 gap-4 mt-2'
```

With responsive classes:
```tsx
className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 sm:gap-4 mt-2'
```

Also consider reducing button sizes on mobile:
```tsx
// Current
className='w-16 h-16 rounded-full ...'

// Suggested
className='w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-full ...'
```

## Affected Lines

| Line | Section |
|------|---------|
| 443 | Character selection grid |
| 470 | Background Color grid |
| 490 | Ear Style grid |
| 515 | Eyes Style grid |
| 540 | Cheek Style grid |
| 565 | Face Style grid |
| 590 | Front Hair Style grid |
| 615 | Hair Style grid |
| 640 | Mouth Style grid |
| 665 | Sideburn Style grid |
| 690 | Skin Color grid |

## Steps to Reproduce

1. Open the app on a mobile device or resize browser to < 640px width
2. Navigate to Profile page
3. Click on the avatar to open the customization modal
4. Observe that the avatar selection buttons overflow the container

### hey @bhavik-mangla, I found an issue on the responsiveness, Can you assign it to me please?