[BUGFIX] Fix avatar sizes and use medium size in SetupModuleController

If no size is explicitly given, the avatar size is based on the text
size, similar to icons. In the SetupModuleController, this lead to an
itty bitty small avatar image.

This fix discovered a CSS bug where the avatar classes used the wrong
CSS variables for sizing.

Resolves: #98364
Releases: main
Change-Id: I5c202f08ae08c23533087c9b8e70a1bd04fdb71c
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75744
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Stefan Bürk <stefan@buerk.tech>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Stefan Bürk <stefan@buerk.tech>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>

Build/Sources/Sass/component/_avatar.scss

@@ -93,15 +93,15 @@ $avatar-size-mega: 64px !default;
 }
 
 .avatar-size-medium {
-    --avatar-size: var(--avatar-size-small);
+    --avatar-size: var(--avatar-size-medium);
 }
 
 .avatar-size-large {
-    --avatar-size: var(--avatar-size-small);
+    --avatar-size: var(--avatar-size-large);
 }
 
 .avatar-size-mega {
-    --avatar-size: var(--avatar-size-small);
+    --avatar-size: var(--avatar-size-mega);
 }
 
 .avatar-icon {

typo3/sysext/setup/Classes/Controller/SetupModuleController.php

@@ -468,10 +468,10 @@ class="form-check-input"
                         $defaultAvatarProvider = GeneralUtility::makeInstance(DefaultAvatarProvider::class);
                         $avatarImage = $defaultAvatarProvider->getImage($backendUser->user, 32);
                         if ($avatarImage) {
-                            $icon = '<span class="avatar"><span class="avatar-image">' .
+                            $icon = '<span class="avatar avatar-size-medium"><span class="avatar-image">' .
                                 '<img alt="" src="' . htmlspecialchars($avatarImage->getUrl()) . '"' .
-                                ' width="' . (int)$avatarImage->getWidth() . '" ' .
-                                'height="' . (int)$avatarImage->getHeight() . '" />' .
+                                ' width="' . (int)$avatarImage->getWidth() . '"' .
+                                ' height="' . (int)$avatarImage->getHeight() . '" />' .
                                 '</span></span>';
                             $html .= '<span class="float-start" style="padding-right: 10px" id="image_' . htmlspecialchars($fieldName) . '">' . $icon . ' </span>';
                         }