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 || '-' }}