src/css/app.scss

@@ -151,6 +151,11 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
+.q-table td[shrink] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 80px;
+}
 .tr-header {
     color: var(--vn-label-color);
 }

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -30,6 +30,7 @@ const vatColumns = ref([
         field: (row) => row.expenseFk,
         sortable: true,
         align: 'left',
+        classes: 'expand',
     },
     {
         name: 'landed',
@@ -339,14 +340,14 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             </QTh>
                         </QTr>
                     </template>
-                    <template #body-cell-transaction="{ value: transactionCell }">
+                    <template #body-cell-vat="{ value: vatCell }">
-                        <QTd :title="transactionCell">
+                        <QTd :title="vatCell" shrink>
-                            {{ transactionCell }}
+                            {{ vatCell }}
                         </QTd>
                     </template>
-                    <template #body-cell-vat="{ value: vatCell }">
+                    <template #body-cell-transaction="{ value: transactionCell }">
-                        <QTd :title="vatCell">
+                        <QTd :title="transactionCell" shrink>
-                            {{ vatCell }}
+                            {{ transactionCell }}
                         </QTd>
                     </template>
                     <template #bottom-row>
@@ -430,20 +431,6 @@ 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);
 }
@@ -451,7 +438,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
     color: var(--vn-text-color);
 }
 
-@media (min-width: $breakpoint-lg) {
+@media (min-width: $breakpoint-md) {
     .summaryBody {
         .vat {
             flex: 65%;