From 7275a530a208b687473c36c50c623e4dbe033af9 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 19 Apr 2022 17:35:05 +0200
Subject: [PATCH] Improve ActorInline component

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Account/ActorInline.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/js/src/components/Account/ActorInline.vue b/js/src/components/Account/ActorInline.vue
index 867bd1689..4857b8607 100644
--- a/js/src/components/Account/ActorInline.vue
+++ b/js/src/components/Account/ActorInline.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="actor-inline">
-    <div class="actor-avatar">
-      <figure class="image is-24x24" v-if="actor.avatar">
+  <div class="inline-flex items-start">
+    <div class="flex-none mr-2">
+      <figure class="image is-48x48" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <b-icon v-else size="is-large" icon="account-circle" />
     </div>
 
-    <div class="actor-name">
-      <p>
+    <div class="flex-auto">
+      <p class="text-base line-clamp-3 md:line-clamp-2 max-w-xl">
         {{ displayName(actor) }}
       </p>
+      <p class="text-sm text-gray-500 truncate">
+        @{{ usernameWithDomain(actor) }}
+      </p>
     </div>
   </div>
 </template>