From 6faafd639303e4b57ed81db2ffb5db4ad598b904 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 3 May 2023 09:25:48 +0200
Subject: [PATCH] fix(front): Small UI fixes on identity pickers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/OrganizerPicker.vue    | 10 ++++++----
 js/src/components/Settings/SettingMenuItem.vue |  2 +-
 js/src/components/Utils/NavBreadcrumbs.vue     |  4 ++--
 js/src/views/Account/IdentityPicker.vue        | 10 ++++++----
 js/src/views/Account/children/EditIdentity.vue |  8 +++++---
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index 869ce1ead..d2797a0de 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -31,7 +31,7 @@
           :id="`availableActor-${availableActor?.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-${availableActor?.id}`"
         >
           <figure class="h-12 w-12" v-if="availableActor?.avatar">
@@ -44,9 +44,11 @@
             />
           </figure>
           <AccountCircle v-else :size="48" />
-          <div class="flex-1">
-            <h3>{{ availableActor?.name }}</h3>
-            <small>{{ `@${availableActor?.preferredUsername}` }}</small>
+          <div class="flex-1 w-px">
+            <h3 class="line-clamp-2">{{ availableActor?.name }}</h3>
+            <small class="flex truncate">{{
+              `@${availableActor?.preferredUsername}`
+            }}</small>
           </div>
         </label>
       </li>
diff --git a/js/src/components/Settings/SettingMenuItem.vue b/js/src/components/Settings/SettingMenuItem.vue
index 0d63caa32..a52570001 100644
--- a/js/src/components/Settings/SettingMenuItem.vue
+++ b/js/src/components/Settings/SettingMenuItem.vue
@@ -8,7 +8,7 @@
     }"
   >
     <router-link v-if="to" :to="to">
-      <span>{{ title }}</span>
+      <span class="truncate">{{ title }}</span>
     </router-link>
     <span v-else>{{ title }}</span>
   </li>
diff --git a/js/src/components/Utils/NavBreadcrumbs.vue b/js/src/components/Utils/NavBreadcrumbs.vue
index 616edc040..0566a6662 100644
--- a/js/src/components/Utils/NavBreadcrumbs.vue
+++ b/js/src/components/Utils/NavBreadcrumbs.vue
@@ -28,7 +28,7 @@
             ></path>
           </svg>
           <span
-            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
             >{{ element.text }}</span
           >
         </div>
@@ -47,7 +47,7 @@
           </svg>
           <router-link
             :to="element"
-            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
             >{{ element.text }}</router-link
           >
         </div>
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index 456a561ef..b7932e688 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/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>
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index 796f71157..22b26c6ad 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/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>