fix : overlap page in view and index pages

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -302,8 +302,10 @@
                   </span>
 
                   <div class="flex flex-col justify-center text-left">
-                    <label
+                    <BaseText
                       v-if="customer.name"
+                      :text="customer.name"
+                      :length="30"
                       class="
                         m-0
                         text-base
@@ -311,12 +313,11 @@
                         leading-tight
                         cursor-pointer
                       "
-                    >
-                      {{ customer.name }}
-                    </label>
-
-                    <label
+                    />
+                    <BaseText
                       v-if="customer.contact_name"
+                      :text="customer.contact_name"
+                      :length="30"
                       class="
                         m-0
                         text-sm
@@ -324,9 +325,7 @@
                         text-gray-400
                         cursor-pointer
                       "
-                    >
-                      {{ customer.contact_name }}
-                    </label>
+                    />
                   </div>
                 </li>
                 <div

resources/scripts/components/base/BaseText.vue

@@ -0,0 +1,31 @@
+<template>
+  <BaseCustomTag :tag="tag" :title="text">
+    {{ displayText }}
+  </BaseCustomTag>
+</template>
+
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+
+  text: {
+    type: String,
+    default: '',
+  },
+
+  length: {
+    type: Number,
+    default: 0,
+  }
+})
+
+const displayText = computed(() => {
+
+  return props.text.length < props.length ?  props.text : `${props.text.substring(0 , props.length)}...`
+})
+</script>