fix : overlap page in view and index pages

resources/scripts/views/recurring-invoices/Index.vue

@@ -196,17 +196,22 @@
         <template #cell-customer="{ row }">
           <router-link
             :to="{ path: `recurring-invoices/${row.data.id}/view` }"
+          >
+          <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+            tag="span"
             class="font-medium text-primary-500 flex flex-col"
           >
             {{ row.data.customer.name }}
-
-            <span class="text-xs text-gray-400">
-              {{
-                row.data.customer.contact_name
-                  ? row.data.customer.contact_name
-                  : ''
-              }}
-            </span>
+          </BaseText>
+          
+          <BaseText
+            :text="row.data.customer.contact_name ? row.data.customer.contact_name: ''"
+            :length="30"
+            tag="span"
+            class="text-xs text-gray-400"
+          />
           </router-link>
         </template>
 

resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue

@@ -238,7 +238,9 @@ onSearched = debounce(onSearched, 500)
           style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
         >
           <div class="flex-2">
-            <div
+            <BaseText
+              :text="invoice.customer.name"
+              :length="30"
               class="
                 pr-2
                 mb-2
@@ -250,10 +252,8 @@ onSearched = debounce(onSearched, 500)
                 capitalize
                 truncate
               "
-            >
-              {{ invoice.customer.name }}
-            </div>
-
+            />
+            
             <div
               class="
                 mt-1