From 3cd185360b5961f43ed1085496d99f97e20f8603 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 16 Jul 2024 14:03:14 +0200
Subject: [PATCH] fix: columns style

---
 src/components/VnTable/VnTable.vue            |  5 +--
 src/css/app.scss                              | 32 ++++++++-----------
 src/pages/Claim/ClaimList.vue                 |  2 +-
 src/pages/Customer/CustomerList.vue           | 12 ++-----
 .../Notifications/CustomerNotifications.vue   |  2 +-
 .../Customer/Payments/CustomerPayments.vue    |  3 +-
 6 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index bf89ab6e1..f7207c63c 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -351,7 +351,7 @@ defineExpose({
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh v-if="col.visible ?? true" auto-width>
+                        <QTh v-if="col.visible ?? true" :class="[col.columnClass]">
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -376,6 +376,7 @@ defineExpose({
                                     :data-key="$attrs['data-key']"
                                     v-model="params[columnName(col)]"
                                     :search-url="searchUrl"
+                                    class="full-width"
                                 />
                             </div>
                         </QTh>
@@ -400,7 +401,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="[getColAlign(col), col.class, col.columnField?.class]"
+                            :class="[getColAlign(col), col.columnClass]"
                             v-if="col.visible ?? true"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">
diff --git a/src/css/app.scss b/src/css/app.scss
index 504718ff5..69861a80c 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -233,27 +233,23 @@ input::-webkit-inner-spin-button {
 }
 
 .q-table {
-    thead,
-    tbody {
-        th {
-            .q-select {
-                max-width: 120px;
-            }
-        }
-        td {
-            padding: 1px 10px 1px 10px;
-            max-width: 100px;
-            div span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
+    th,
+    td {
+        padding: 1px 10px 1px 10px;
+        max-width: 100px;
+        div span {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
         }
-        .expand {
-            max-width: 400px;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .shrink {
+        max-width: 75px;
+    }
+    .expand {
+        max-width: 400px;
     }
 }
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 05698debe..8c5c6a3d0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -44,7 +44,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         align: 'left',
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a9e4d978e..a82f1fc0e 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -42,9 +42,7 @@ const columns = computed(() => [
         name: 'name',
         isTitle: true,
         create: true,
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -52,9 +50,7 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -136,9 +132,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
-        columnField: {
-            class: 'expand',
-        },
+        columnClass: 'expand',
     },
     {
         align: 'left',
diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index 5bdb69d70..f84964600 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -32,7 +32,7 @@ const columns = computed(() => [
                 optionLabel: 'socialName',
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         align: 'left',
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index ee6765c59..be0c41a26 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -45,6 +45,7 @@ const columns = computed(() => [
             inWhere: true,
             alias: 't',
         },
+        columnClass: 'shrink',
     },
     {
         align: 'left',
@@ -57,7 +58,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         name: 'isConfirmed',