From 7936fa0d96db1716eeef38dfb31736726bec8bc5 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Thu, 5 Sep 2024 11:51:55 +0700
Subject: [PATCH] refactor: edit layout show icon

---
 src/components/shared/PersonCard.vue | 34 ++++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index f37fec93..ef306b02 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -139,22 +139,26 @@ defineEmits<{
       </AppCircle>
 
       <!-- name symbol -->
-      <span class="items-center justify-center row text-center full-width">
-        <span class="ellipsis col-6">
-          {{ data.name }}
+      <span class="full-width">
+        <span
+          class="items-center justify-center row text-center ellipsis col-6"
+        >
+          <div class="items-center ellipsis" style="max-width: 140px">
+            {{ data.name }}
+          </div>
+          <Icon
+            v-if="data.male || data.female"
+            class="q-pl-xs"
+            :class="{
+              'symbol-gender': data.male || data.female,
+              'symbol-gender__male': !disabled && data.male,
+              'symbol-gender__female': !disabled && data.female,
+              'symbol-gender__disable': disabled,
+            }"
+            :icon="`material-symbols:${data.male ? 'male' : 'female'}`"
+            width="24px"
+          />
         </span>
-        <Icon
-          v-if="data.male || data.female"
-          class="q-pl-xs"
-          :class="{
-            'symbol-gender': data.male || data.female,
-            'symbol-gender__male': !disabled && data.male,
-            'symbol-gender__female': !disabled && data.female,
-            'symbol-gender__disable': disabled,
-          }"
-          :icon="`material-symbols:${data.male ? 'male' : 'female'}`"
-          width="24px"
-        />
       </span>
       <span style="color: hsl(var(--text-mute)); scale: 0.9">
         {{ data.code || '-' }}