fix(front): actor label centered

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>

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>