fix(front): Small UI fixes on identity pickers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Account/IdentityPicker.vue

@@ -28,7 +28,7 @@
             :id="`availableActor-${identity?.id}`"
           />
           <label
-            class="flex flex-wrap gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+            class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
             :for="`availableActor-${identity?.id}`"
           >
             <figure class="h-12 w-12" v-if="identity?.avatar">
@@ -41,9 +41,11 @@
               />
             </figure>
             <AccountCircle v-else :size="48" />
-            <div class="flex-1">
-              <h3>{{ identity?.name }}</h3>
-              <small>{{ `@${identity?.preferredUsername}` }}</small>
+            <div class="flex-1 w-px">
+              <h3 class="line-clamp-2">{{ identity?.name }}</h3>
+              <small class="flex truncate">{{
+                `@${identity?.preferredUsername}`
+              }}</small>
             </div>
           </label>
         </li>

js/src/views/Account/children/EditIdentity.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <breadcrumbs-nav :links="breadcrumbsLinks" />
-    <div class="root" v-if="identity">
-      <h1 class="title">
-        <span v-if="isUpdate">{{ displayName(identity) }}</span>
+    <div v-if="identity">
+      <h1>
+        <span v-if="isUpdate" class="line-clamp-2">{{
+          displayName(identity)
+        }}</span>
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>