fix(NcAvatar): math-perfect adaptive scaling

[ShGKme]

Resolves

• Avatar is more adaptive now after fix(NcAvatar): extend variable size of status icons #5959
• But the status icon still has a fixed position, making it impossible to use more variable size
• Use cases
  • Talk Desktop title bar (small avatar)
  • Auto-complete (small avatar)
  • Profile page (large avatar)
• Continue of:
• See also: fix(avatar): decrease avatar size from 44px to 36px nextcloud/spreed#12956 (review)
• The main problem is status icon position. Best look is then the center of the status is on the edge of the avatar circle. It cannot be easily calculated like 25% * size. So, I use math
• Bonus: status icon position is independent from its size. It always stays on this place

Diagram

$$\sqrt2 r_1 = r_1 + y$$ $$\implies y = r_1(\sqrt2 - 1)$$ $$\sqrt2 (r_2 + x) = y$$ $$\sqrt2 (r_2 + x) = r_1(\sqrt2 - 1)$$ $$\implies x = r_1(1 - \frac {1} {\sqrt(2)}) - r_2$$

🖼️ 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