[Bug]: Unify avatar badge size & positioning across sub-components

[Ali-hagha]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

Problem

Avatar corner badges (AvatarCompanyIcon, AvatarOnlineIndicator, VerifiedTick, AvatarCount) use inconsistent size/position rules. Same slot, different contracts.

Inconsistencies

Positioning

• Company: -right-0.5 -bottom-0.5 (bleeds outside)
• Online / Count / Verified: right-0 bottom-0
• Verified xs: extra -right-px -bottom-px in avatar.tsx
• AvatarProfilePhoto: inset offsets (bottom-0.5/1/2, right-0.5/1/2) — different from Avatar

Sizing

Avatar	Online	Company	Verified	Count
xs	6px	8px	10px	14px fixed
2xl	16px	20px	20px	14px fixed

• Online consistently smallest
• Count has no size prop — doesn't scale with avatar
• Company ≈ Verified but not identical at xs

Styling

• Online + Company: ring-[1.5px] ring-bg-primary
• Verified: no ring, z-10

API

• status / verified / count built into Avatar
• Company via badge prop
• Demos pass count as badge={<AvatarCount />} instead of count prop

Expected

Single badge contract:

• One anchor strategy (flush or bleed — pick one)
• Shared size scale per avatar tier (or documented exception for online dot)
• Count scales or all badges use fixed scale
• Same positioning in Avatar and AvatarProfilePhoto

Files

• components/base/avatar/base-components/avatar-company-icon.tsx
• components/base/avatar/base-components/avatar-online-indicator.tsx
• components/base/avatar/base-components/verified-tick.tsx
• components/base/avatar/base-components/avatar-count.tsx
• components/base/avatar/avatar.tsx
• components/base/avatar/avatar-profile-photo.tsx

Steps to reproduce

1. Open Storybook
2. Compare same-size avatars (xs through 2xl) with each badge type:
   • status="online"
   • verified
   • count={5} or badge={<AvatarCount count={5} />}
   • badge={<AvatarCompanyIcon ... />}
3. Inspect corner badge position and size in devtools
4. Repeat with AvatarProfilePhoto (sm, md, lg) for status and verified

Expected behavior

• All corner badges share one anchor strategy (flush or bleed)
• Badge size scales consistently per avatar tier
• Avatar and AvatarProfilePhoto use same positioning rules
• Ring/styling treatment consistent across badge types
• count prop used uniformly (not mixed with badge prop)

Actual behavior

• Position: Company bleeds (-right-0.5 -bottom-0.5); others flush (right-0 bottom-0); verified xs has extra -1px offset; AvatarProfilePhoto uses inset offsets (bottom-0.5/1/2, right-0.5/1/2)
• Size: Online smallest at every tier; company ≈ verified; count fixed at 14px regardless of avatar size
• Styling: Online + company have ring; verified has no ring, uses z-10
• API: Company/count often passed via badge prop; status/verified/count are built-in props on Avatar

Code example

Browser

No response

Device type

No response

Component version

No response

Environment details

No response

Screenshots/Videos

Console errors

Additional context

No response

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility