fix: adjust component (person card & customer info)

src/components/03_customer-management/CustomerInfoComponent.vue

@@ -8,7 +8,6 @@ import useOptionStore from 'src/stores/options';
 import { Status } from 'src/stores/types';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
 
-import AppBox from 'components/app/AppBox.vue';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import NoData from 'components/NoData.vue';
@@ -87,9 +86,12 @@ watch(currentStatus, async () => {
 </script>
 
 <template>
-  <div class="bordered surface-1 col column surface-2">
+  <div
-    <div class="row no-wrap justify-between bordered-b surface-3">
+    class="bordered surface-1 col column surface-2 rounded"
-      <div class="row items-center">
+    style="overflow: hidden"
+  >
+    <div class="row justify-between bordered-b surface-3 full-width">
+      <div class="row items-center col-12 col-sm">
         <q-btn
           round
           icon="mdi-arrow-left"
@@ -128,21 +130,27 @@ watch(currentStatus, async () => {
           </div>
         </div>
       </div>
-      <div class="row items-center q-px-md">
+
+      <div class="row items-center q-px-md col-12 col-sm q-py-sm no-wrap">
         <q-btn
           id="btn-add-customer"
           dense
+          padding="8px 16px"
           unelevated
           :label="'+ ' + $t('formDialogTitleCreateSubBranch')"
-          padding="4px 16px"
           @click="$emit('dialog')"
-          style="background-color: var(--cyan-6); color: white"
+          style="
+            background-color: var(--cyan-6);
+            color: white;
+            white-space: nowrap;
+          "
         />
+
         <q-separator vertical inset class="q-mx-md" />
         <q-input
-          style="width: 250px"
           outlined
           dense
+          class="col"
           :label="$t('search')"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearch"
@@ -158,7 +166,7 @@ watch(currentStatus, async () => {
           size="sm"
           :color="$q.dark.isActive ? 'dark' : 'white'"
           :text-color="$q.dark.isActive ? 'white' : 'dark'"
-          class="bordered rounded q-ml-md"
+          class="bordered rounded q-ml-sm"
           unelevated
         >
           <q-menu class="bordered">
@@ -199,7 +207,7 @@ watch(currentStatus, async () => {
     >
       <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
-      <div v-for="(br, i) in branch" :key="i" class="col-4">
+      <div v-for="(br, i) in branch" :key="i" class="col-md-6 col-12">
         <BranchCardCustomer
           class="surface-1"
           :inactive="br.status === 'INACTIVE'"
@@ -221,9 +229,8 @@ watch(currentStatus, async () => {
       </div>
     </div>
 
-    <div class="row justify-between items-center q-px-md">
+    <div class="row justify-between items-center q-px-md q-py-sm">
-      <div class="row col-4 items-center"></div>
+      <div class="app-text-muted col offset-md-4">
-      <div class="app-text-muted">
         {{
           $t('recordsPage', {
             resultcurrentPage: branch?.length,

src/components/home/PersonCard.vue

@@ -46,12 +46,14 @@ defineEmits<{
   >
     <div class="column items-center">
       <!-- kebab menu -->
-      <div class="full-width flex" v-if="!noAction">
+      <div class="full-width flex no-wrap" v-if="!noAction">
         <div style="margin-right: auto">
           <span
             class="tags"
             v-for="v in tag"
+            :key="v.value"
             :class="{ [`tags__${v.color}`]: true }"
+            style="text-wrap: nowrap"
           >
             {{ v.value }}
           </span>
@@ -155,7 +157,6 @@ defineEmits<{
       </div>
 
       <!-- profile -->
-
       <AppCircle
         bordered
         class="avatar"
@@ -184,8 +185,10 @@ defineEmits<{
       </AppCircle>
 
       <!-- name symbol -->
-      <span class="items-center row">
+      <span class="items-center text-center row full-width">
-        {{ data.name }}
+        <span class="col ellipsis" style="width: 0">
+          {{ data.name }}
+        </span>
         <Icon
           v-if="data.male || data.female"
           class="q-pl-xs"