feat: refs #7197 summary responsive

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -66,7 +66,7 @@ const vatColumns = ref([
         field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
         format: (value) => toCurrency(value, currency.value),
         sortable: true,
-        align: 'center',
+        align: 'left',
     },
     {
         name: 'currency',
@@ -339,6 +339,16 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body-cell-transaction="{ value: transactionCell }">
+                        <QTd :title="transactionCell">
+                            {{ transactionCell }}
+                        </QTd>
+                    </template>
+                    <template #body-cell-vat="{ value: vatCell }">
+                        <QTd :title="vatCell">
+                            {{ vatCell }}
+                        </QTd>
+                    </template>
                     <template #bottom-row>
                         <QTr class="bg">
                             <QTd></QTd>
@@ -347,7 +357,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             }}</QTd>
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd class="text-center">{{
+                            <QTd>{{
                                 toCurrency(getTotalTax(entity.invoiceInTax, currency))
                             }}</QTd>
                             <QTd></QTd>
@@ -420,13 +430,28 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
     </CardSummary>
 </template>
 <style lang="scss" scoped>
+.vat {
+    :deep(td:nth-child(3)),
+    :deep(td:nth-child(4)) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    :deep(td:nth-child(3)) {
+        max-width: 150px;
+    }
+    :deep(td:nth-child(4)) {
+        max-width: 200px;
+    }
+}
+
 .bg {
     background-color: var(--vn-accent-color);
 }
 .q-chip {
     color: var(--vn-text-color);
 }
-@media (min-width: $breakpoint-md) {
+
+@media (min-width: $breakpoint-lg) {
     .summaryBody {
         .vat {
             flex: 65%;