fix: admin settings user avatar take too much space and divergend fro…

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -47,7 +47,7 @@
         <span class="sr-only">{{ $gettext('Avatar') }}</span>
       </template>
       <template #avatar="{ item }">
-        <user-avatar :user-id="item.id" :user-name="item.displayName" />
+        <user-avatar :user-id="item.id" :user-name="item.displayName" :width="32" />
       </template>
       <template #role="{ item }">
         <template v-if="item.appRoleAssignments">{{ getRoleDisplayNameByUser(item) }}</template>

packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`MembersRoleSection > should render all members accordingly 1`] = `
 "<ul class="oc-list">
   <li class="flex items-center mb-2" data-testid="space-members-list">
-    <user-avatar-stub userid="[Function]" username="einstein" class="mr-2"></user-avatar-stub> einstein
+    <user-avatar-stub userid="[Function]" username="einstein" width="36" class="mr-2"></user-avatar-stub> einstein
   </li>
   <li class="flex items-center mb-2" data-testid="space-members-list">
     <oc-avatar-item-stub icon="group" name="group" accessiblelabel="" background="var(--oc-role-secondary)" iconcolor="var(--oc-role-on-secondary)" iconfilltype="fill" iconsize="medium" width="36" class="mr-2"></oc-avatar-item-stub> physic-lovers

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -112,7 +112,7 @@ exports[`Users view > list view > renders list initially 1`] = `
           <tbody data-v-3c9ab66c="" class="has-item-context-menu">
             <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
               <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
-              <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
+              <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 32px; height: 32px; line-height: 32px; background-color: #106892; font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
               <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
               <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
               <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`Collaborator ListItem component > share inheritance indicators > show w
   <div class="w-full grid grid-cols-2 items-center files-collaborators-collaborator-details">
     <div class="flex items-center">
       <div>
-        <user-avatar-stub userid="3" username="einstein" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
+        <user-avatar-stub userid="3" username="einstein" width="36" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
       </div>
       <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full">
         <div class="truncate"><span aria-hidden="true" class="files-collaborators-collaborator-name">einstein</span> <span class="sr-only">Share receiver name: einstein</span>

packages/web-pkg/src/components/Avatars/UserAvatar.vue

@@ -1,15 +1,20 @@
 <template>
-  <oc-avatar :user-name="userName" :src="avatarSrc" :width="36" />
+  <oc-avatar :user-name="userName" :src="avatarSrc" :width="width" />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, unref } from 'vue'
 import { useAvatarsStore, useLoadAvatars } from '../../composables'
 import { storeToRefs } from 'pinia'
 
-const { userId } = defineProps<{
+const {
+  userId,
+  userName,
+  width = 36
+} = defineProps<{
   userId: string
   userName: string
+  width?: number
 }>()
 
 const avatarsStore = useAvatarsStore()