refactor: ellipsis title & tooltip on card

src/components/01_branch-management/BranchCard.vue

@@ -59,7 +59,10 @@ defineProps<{
         </q-img>
       </div>
       <div class="branch-card__name flex justify-center q-ml-sm">
-        <b>{{ data.branchLabelName }}</b>
+        <b class="ellipsis-2-lines">
+          {{ data.branchLabelName }}
+          <q-tooltip>{{ data.branchLabelName }}</q-tooltip>
+        </b>
         <small class="branch-card__code" v-if="data.branchLabelCode">
           {{ data.branchLabelCode }}
         </small>

src/components/04_product-service/ProductCardComponent.vue

@@ -65,7 +65,10 @@ withDefaults(
       </div>
 
       <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
-        <div class="text-subtitle1 text-bold">{{ title }}</div>
+        <div class="text-subtitle1 text-bold ellipsis-2-lines">
+          {{ title }}
+          <q-tooltip>{{ title }}</q-tooltip>
+        </div>
         <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
         <div class="row q-gutter-md q-mt-sm">
           <div

src/components/shared/PersonCard.vue

@@ -142,6 +142,9 @@ defineEmits<{
         >
           <div class="items-center ellipsis" style="max-width: 140px">
             {{ data.name }}
+            <q-tooltip>
+              {{ data.name }}
+            </q-tooltip>
           </div>
           <Icon
             v-if="data.male || data.female"