fix(NcAvatar): orbital best-fit adaptive status icon

[ShGKme]

Resolves

• Avatar has variable size
• The status icon also has a variable size (25% width)
• But the status icon still has a fixed position
• On different size avatar status has different position
  • On a large avatar - too far from the avatar
  • On a small avatar - outside of avatar box
  • On some sizes - inside, but not in a perfect position
• Use cases
  • Talk Desktop title bar (small avatar)
  • Auto-complete (small avatar)
  • Profile page (large avatar)
• Ref: fix(NcAvatar): extend variable size of status icons #5959
• Ref: fix(avatar): decrease avatar size from 44px to 36px nextcloud/spreed#12956 (review)

Status icon size

This PR makes the status icon:

• • 💫 Orbital: the status icon's center is positioned on the avatar circle
• • ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box

Edge case: small avatar

The solution above doesn't work well on a very small avatar. It makes the

• Status icon size is limited to fit --clickable-area-small avatar
• The position is moved to keep it orbital

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[DorraJaouad]

I love it 🦅
I had same issue when setting conversation icon in sidebar call, this was my approach with proportions
nextcloud/spreed@332cd35#diff-c9b05a3b55c5db03cb3bfb8c9ca12d8d9380405b7b405e870dfb2ce735c528b3

(it wasn't 100% accurate outside a certain interval)

It would be nice to implement orbital approach for future cases in Talk 👍🏻

[susnux]

/backport to stable8