fix: refs #6553 fix vnTable css

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,17 +766,6 @@ es:
     table tbody th {
         position: relative;
     }
-}
-
-.last-row-sticky {
-    tbody:nth-last-child(1) {
-        @extend .bg-header;
-        position: sticky;
-        z-index: 2;
-        bottom: 0;
-    }
-}
-
     .vn-label-value {
         display: flex;
         flex-direction: row;
@@ -785,6 +779,16 @@ es:
             user-select: all;
         }
     }
+}
+
+.last-row-sticky {
+    tbody:nth-last-child(1) {
+        @extend .bg-header;
+        position: sticky;
+        z-index: 2;
+        bottom: 0;
+    }
+}
 
 .cardEllipsis {
     overflow: hidden;
@@ -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 {

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?