From e920babef6e207cf6eb0e2ec29ce07cb8cb41930 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 19 Jan 2025 17:19:06 +0100
Subject: [PATCH] fix(front): actor label centered

---
 front/src/components/common/ActorAvatar.vue |  5 +++--
 front/src/components/common/ActorLink.vue   | 25 ++++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/front/src/components/common/ActorAvatar.vue b/front/src/components/common/ActorAvatar.vue
index f6222afa1..b1834a959 100644
--- a/front/src/components/common/ActorAvatar.vue
+++ b/front/src/components/common/ActorAvatar.vue
@@ -21,11 +21,11 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
     :src="actor.icon.urls.medium_square_crop"
     class="ui avatar circular image"
   >
-  <span
+  <i
     v-else
     :style="defaultAvatarStyle"
     class="ui avatar circular label"
-  >{{ actor.preferred_username?.[0] || "" }}</span>
+  >{{ actor.preferred_username?.[0] || "" }}</i>
 </template>
 
 <style lang="scss">
@@ -37,5 +37,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
   &.label {
     align-content: center;
   }
+
 }
 </style>
diff --git a/front/src/components/common/ActorLink.vue b/front/src/components/common/ActorLink.vue
index 2518eaa66..5aacb49fa 100644
--- a/front/src/components/common/ActorLink.vue
+++ b/front/src/components/common/ActorLink.vue
@@ -60,10 +60,25 @@ const url = computed(() => {
     secondary
     round
   >
-    <actor-avatar
-      v-if="avatar"
-      :actor="actor"
-    />
-    <slot>{{ repr }}</slot>
+    <span class="center">
+      <actor-avatar
+        v-if="avatar"
+        :actor="actor"
+      />
+      <slot>{{ repr }}</slot>
+    </span>
   </Link>
 </template>
+
+<style lang="scss" scoped>
+a.username {
+  span.center {
+    display: flex;
+    align-items: center;
+  }
+  i.label {
+    padding: 4px 8px;
+    margin-right: 8px;
+  }
+}
+</style>