Merge pull request #2871 from Human-Connection/fix-avatar-issues

fix(webapp): 🐛 Adjust Avatar Sizes and 'z-index'

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <user-avatar :user="user" />
+        <user-avatar :user="user" size="small" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -127,6 +127,10 @@ export default {
   display: flex;
   align-items: center;
   padding-left: $space-xx-small;
+
+  > .user-avatar {
+    margin-right: $space-xx-small;
+  }
 }
 .avatar-menu-popover {
   padding-top: $space-x-small;

webapp/components/PostCard/PostCard.vue

@@ -193,6 +193,8 @@ export default {
   /* workaround to avoid jumping layout when user-teaser is rendered */
   .user-wrapper {
     height: 36px;
+    position: relative;
+    z-index: $z-index-post-card-link;
   }
 
   .content-menu {

webapp/components/UserTeaser/UserTeaser.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-teaser" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" />
+    <user-avatar v-if="showAvatar" size="small" />
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <dropdown
@@ -158,8 +158,6 @@ export default {
 .user-teaser {
   display: flex;
   flex-wrap: nowrap;
-  z-index: $z-index-post-card-link;
-  position: relative;
 
   > .user-avatar {
     flex-shrink: 0;

webapp/components/_new/generic/UserAvatar/UserAvatar.vue

@@ -6,7 +6,7 @@
       v-else
       :src="user.avatar | proxyApiUrl"
       class="image"
-      @error="event.target.style.display = 'none'"
+      @error="$event.target.style.display = 'none'"
     />
   </div>
 </template>
@@ -75,7 +75,6 @@ export default {
 
   > .image {
     position: relative;
-    z-index: 5;
     width: 100%;
     object-fit: cover;
     object-position: center;