[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

[hiSandog]

This would be easier to keep consistent if badge geometry were expressed as shared tokens per avatar tier: anchor offset, visual diameter, and ring width, with each badge type choosing only a semantic variant. The online dot can intentionally be smaller, but that exception should be encoded rather than copied through separate class tables. Storybook visual regressions across every size, badge type, count width, and AvatarProfilePhoto would catch both token drift and clipping at container boundaries.