It is required to allow using avatar as a phrasing content, for example, as a button content.

☑️ Resolves

Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

• A part of https://github.com/nextcloud/andy/issues/5

Sometimes we use NcAvatar as a button content, for example, as a Popover trigger on the main UserMenu.

HTML does not allow this. Button should have only so-called phrasing (aca inline text) content.

This PR makes NcAvatar a span instead of a div.

For some places it doesn't change anything in the layout, because it has display: inline-block, or position: absolute. In other places display: block; was implicitly added.

Alternative solution: make NcHeaderItem not a <button> but a div[role=button].

#4675

🖼️ Screenshots

No visual changes

User Menu	Comments	Sharing	Talk

🚧 Tasks

• Replace all div with a span
• Update styles, add display: block; where it is required.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable