From 3e1635787821a66d9b05d43b5d98f3572049e2fa Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 9 Jan 2025 12:37:02 +0100
Subject: [PATCH] fix: refs #6553 fix vnTable css

---
 src/components/VnTable/VnTable.vue       | 42 ++++++++++++++----------
 src/pages/Worker/Card/WorkerBusiness.vue | 24 +-------------
 2 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 941ca98ab..0694a429b 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -315,7 +315,11 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
         show-if-above
     >
         <QScrollArea class="fit">
-            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
+            <VnTableFilter
+                :data-key="$attrs['data-key']"
+                :columns="columns"
+                :redirect="redirect"
+            />
         </QScrollArea>
     </QDrawer>
     <CrudModel
@@ -721,6 +725,7 @@ es:
     div.fields {
         width: 100%;
         .vn-label-value {
+            background-color: red;
             display: flex;
             gap: 2%;
         }
@@ -761,6 +766,19 @@ es:
     table tbody th {
         position: relative;
     }
+    .vn-label-value {
+        display: flex;
+        flex-direction: row;
+        color: var(--vn-text-color);
+        .value {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            pointer-events: all;
+            cursor: text;
+            user-select: all;
+        }
+    }
 }
 
 .last-row-sticky {
@@ -772,20 +790,6 @@ es:
     }
 }
 
-.vn-label-value {
-    display: flex;
-    flex-direction: row;
-    color: var(--vn-text-color);
-    .value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        pointer-events: all;
-        cursor: text;
-        user-select: all;
-    }
-}
-
 .cardEllipsis {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -794,12 +798,14 @@ es:
 
 .grid-two {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
     max-width: 100%;
+    width: 600px;
     margin: 1em auto;
-    overflow: scroll;
     white-space: wrap;
-    width: 100%;
+    .vn-label-value {
+        flex-direction: column;
+    }
 }
 
 .w-80 {
diff --git a/src/pages/Worker/Card/WorkerBusiness.vue b/src/pages/Worker/Card/WorkerBusiness.vue
index 433eb20b1..6025ae289 100644
--- a/src/pages/Worker/Card/WorkerBusiness.vue
+++ b/src/pages/Worker/Card/WorkerBusiness.vue
@@ -207,7 +207,6 @@ const columns = computed(() => [
 <template>
     <VnTable
         ref="tableRef"
-        class="BusinessCard"
         data-key="WorkerBusiness"
         :url="`Workers/${entityId}/Business`"
         save-url="/Businesses/crud"
@@ -223,33 +222,12 @@ const columns = computed(() => [
         auto-load
         :disable-option="{ table: true }"
         :right-search="false"
-        card-class="BusinessCard grid-two q-gutter-x-xl q-gutter-y-md q-pr-lg q-py-lg"
+        card-class="grid-two q-gutter-x-xl q-gutter-y-md q-pr-lg q-py-lg"
         :is-editable="true"
         :use-model="true"
         @save-changes="(data) => reactivateWorker(data)"
     />
 </template>
-<style lang="scss" scoped>
-.BusinessCard {
-    background-color: blue;
-}
-.q-table__container .vn-label-value .label {
-    color: red;
-}
-.q-table__container {
-    background-color: red;
-}
-.VnTable {
-    background-color: red;
-    .q-table__container {
-        .vn-label-value {
-            .label {
-                background-color: blue;
-            }
-        }
-    }
-}
-</style>
 <i18n>
 es:
     Do you want to reactivate the user?: desea reactivar el usuario?