From 45be96cf68cf617efbba2a3eb8f7e4341c4a743b Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 23 Nov 2025 15:18:40 +0800
Subject: [PATCH] adjust column widths to fit their content

---
 .../dialogs/ReconciliationStatementDialog.vue | 19 +++++++++++++++++--
 .../tabs/ImportTransactionCheckDataTab.vue    | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
index 6b2f75b3..8d40a6e8 100644
--- a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
+++ b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
@@ -137,7 +137,7 @@
                 multi-sort
                 density="compact"
                 item-value="index"
-                :class="{ 'disabled': loading }"
+                :class="{ 'reconciliation-statement-table': true, 'disabled': loading }"
                 :headers="dataTableHeaders"
                 :items="reconciliationStatements?.transactions ?? []"
                 :hover="true"
@@ -400,7 +400,7 @@ const dataTableHeaders = computed<object[]>(() => {
     headers.push({ key: 'sourceAccountName', value: 'sourceAccountName', title: tt('Account'), sortable: true, nowrap: true });
     headers.push({ key: 'accountBalance', value: 'accountBalance', title: tt(accountBalanceName), sortable: true, nowrap: true });
     headers.push({ key: 'comment', value: 'comment', title: tt('Description'), sortable: true, nowrap: true });
-    headers.push({ key: 'operation', title: tt('Operation'), sortable: false, nowrap: true, align: 'end' });
+    headers.push({ key: 'operation', title: tt('Operation'), sortable: false, nowrap: true, align: 'center' });
     return headers;
 });
 
@@ -617,3 +617,18 @@ defineExpose({
     open
 });
 </script>
+
+<style>
+.reconciliation-statement-table > .v-table__wrapper > table {
+    th:not(:nth-last-child(2)),
+    td:not(:nth-last-child(2)) {
+        width: auto !important;
+        white-space: nowrap;
+    }
+
+    th:nth-last-child(2),
+    td:nth-last-child(2) {
+        width: 100% !important;
+    }
+}
+</style>
diff --git a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
index b1795129..02e11875 100644
--- a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
+++ b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
@@ -1948,6 +1948,19 @@ defineExpose({
 </script>
 
 <style>
+.import-transaction-table > .v-table__wrapper > table {
+    th:not(:last-child),
+    td:not(:last-child) {
+        width: auto !important;
+        white-space: nowrap;
+    }
+
+    th:last-child,
+    td:last-child {
+        width: 100% !important;
+    }
+}
+
 .import-transaction-table .v-autocomplete.v-input.v-input--density-compact:not(.v-textarea) .v-field__input,
 .import-transaction-table .v-select.v-input.v-input--density-compact:not(.v-textarea) .v-field__input {
     min-height: inherit;