fix(NcAvatar): make min status size visually accessible

[DorraJaouad]

☑️ Resolves

• With size below 14px, it becomes visually hard to see emoji.

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[susnux]

So the status icon is hidden if the avatar is below 50px? Then this is a no go as this will break many places, it must at least work with default clickable area (34px) avatar size.

[DorraJaouad]

So the status icon is hidden if the avatar is below 50px?

No, it is just bigger from 11px -> around 14px

[susnux]

Or maybe I read it wrong, it sets the min size?
So it will not longer be perfectly an orbit?

Then we need to fix this in a different way (the original issue) as this then breaks again some places where it was fixed by the original PR.

[Antreesy]

Also it's cropped on 'After' screenshot 🙈

IMO we should define a minimum size of an icon, and 'break' orbital rule the way, that icon is moving slightly inside the avatar, not going out of square frame

[susnux]

This is more than 14px, why a random number like 50px?
I think it makes more sense to use either clickable area large which is a value you might choose for the avatar when not using magic numbers:

Suggested change

	--avatar-status-size-min: calc(50px * (1 - 1 / sqrt(2)));
	--avatar-status-size-min: calc(var(--clickable-area-large) * (1 - 1 / sqrt(2)));

Or because you want to limit the emoji to a readable size, then you do not need the avatar size here at all but just use the min. accessible size:

Suggested change

	--avatar-status-size-min: calc(50px * (1 - 1 / sqrt(2)));
	--avatar-status-size-min: var(--font-size-small);

[DorraJaouad]

font size seems to be optimal

[susnux]

IMO we should define a minimum size of an icon, and 'break' orbital rule the way, that icon is moving slightly inside the avatar, not going out of square frame

Yes that exactly is my problem with this change here, because it will break server styles again.
Where we need the avatar to fit in a square with status icon when the avatar has a size of --default-clickable-area.

I think the best solution is to limit the icon size to --font-size-small which is the smallest size for icons and text.
And then calculate the icon position based on the icon size which can be simplified to just set the insets both to 0px so it will always be on the correct location and for larger avatars the orbital behavior is preserved.

State changed

[ShGKme]

Then we probably need to only show the status when the avatar is not too small.

[ShGKme]

Also, initials overlap the status

[susnux]

Seems to work fine now also for default clickable area

[susnux]

Also, initials overlap the status

But not related to this PR, the order of elements is wrong, the status icon element should be the last one.

[ShGKme]

But not related to this PR

Kind of related. It became more visible with the new position and size on the status icon.

[Antreesy]

Added lib screenshots. Fixing initials would be moving 10 lines around, so shouldn't be a problem

[DorraJaouad]

/backport to stable8