fix: refs #7353 horizontal scroll

src/components/VnTable/VnTable.vue

@@ -415,7 +415,7 @@ function handleOnDataSaved(_, res) {
                     <QBtn
                         v-if="$props.rightSearch"
                         icon="filter_alt"
-                        class="bg-vn-section-color q-ml-md"
+                        class="bg-vn-section-color q-ml-sm"
                         dense
                         @click="stateStore.toggleRightDrawer()"
                     />
@@ -502,8 +502,9 @@ function handleOnDataSaved(_, res) {
                             :key="index"
                             :title="btn.title"
                             :icon="btn.icon"
-                            class="q-px-sm"
+                            class="q-pa-xs"
                             flat
+                            dense
                             :class="
                                 btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
                             "
@@ -745,10 +746,16 @@ es:
     }
 }
 
-.q-table th {
+.q-table {
+    th {
         padding: 0;
-}
+    }
 
+    &__top {
+        padding: 12px 0px;
+        top: 0;
+    }
+}
 .vnTable {
     thead tr th {
         position: sticky;
@@ -757,9 +764,6 @@ es:
     thead tr:first-child th {
         top: 0;
     }
-    .q-table__top {
-        top: 0;
-    }
     tbody {
         .q-checkbox {
             display: flex;

src/components/VnTable/VnVisibleColumn.vue

@@ -135,7 +135,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
+    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-sm q-px-sm" dense>
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
                 <QIcon name="info" size="sm" class="info-icon">

src/pages/Monitor/MonitorClients.vue

@@ -139,7 +139,10 @@ const columns = computed(() => [
     </VnTable>
 </template>
 <style lang="scss" scoped>
-.full-width .vn-row > * {
+.full-width .vn-row {
-    flex: 0.4;
+    margin-bottom: 0;
+    > * {
+        flex: 0.3;
+    }
 }
 </style>

src/pages/Monitor/Ticket/MonitorTickets.vue

@@ -54,7 +54,7 @@ const columns = computed(() => [
         label: t('salesTicketsTable.problems'),
         name: 'totalProblems',
         align: 'left',
-
+        columnClass: 'no-padding',
         columnFilter: false,
         attrs: {
             dense: true,
@@ -65,7 +65,6 @@ const columns = computed(() => [
         name: 'id',
         field: 'id',
         align: 'left',
-
         columnFilter: {
             component: 'number',
             name: 'id',
@@ -110,7 +109,6 @@ const columns = computed(() => [
         name: 'shippedDate',
         style: { 'max-width': '100px' },
         align: 'left',
-
         columnFilter: {
             component: 'date',
             name: 'shippedDate',
@@ -164,7 +162,6 @@ const columns = computed(() => [
         label: t('salesTicketsTable.state'),
         name: 'state',
         align: 'left',
-        style: { 'max-width': '100px' },
         columnFilter: {
             component: 'select',
             name: 'stateFk',
@@ -193,7 +190,6 @@ const columns = computed(() => [
         label: t('salesTicketsTable.zone'),
         name: 'zoneFk',
         align: 'left',
-
         columnFilter: {
             component: 'select',
             name: 'zoneFk',
@@ -210,8 +206,7 @@ const columns = computed(() => [
         name: 'totalWithVat',
         field: 'totalWithVat',
         align: 'left',
-        style: { 'max-width': '75px' },
+        style: 'max-width: 75px',
-
         columnFilter: {
             component: 'number',
             name: 'totalWithVat',
@@ -370,7 +365,7 @@ const openTab = (id) =>
             </QCheckbox>
         </template>
         <template #column-totalProblems="{ row }">
-            <QTd class="no-padding" style="max-width: 60px">
+            <span>
                 <QIcon
                     v-if="row.isTaxDataChecked === 0"
                     name="vn:no036"
@@ -424,30 +419,27 @@ const openTab = (id) =>
                 >
                     <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
                 </QIcon>
-            </QTd>
+            </span>
         </template>
         <template #column-id="{ row }">
-            <QTd class="no-padding">
             <span class="link" @click.stop.prevent>
                 {{ row.id }}
                 <TicketDescriptorProxy :id="row.id" />
             </span>
-            </QTd>
         </template>
         <template #column-clientFk="{ row }">
-            <QTd class="no-padding" @click.stop :title="row.nickname">
+            <div @click.stop :title="row.nickname">
-                <span class="link">{{ row.nickname }}</span>
+                <span class="link" v-text="row.nickname" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
-            </QTd>
+            </div>
         </template>
         <template #column-salesPersonFk="{ row }">
-            <QTd class="no-padding" @click.stop :title="row.userName">
+            <div @click.stop :title="row.userName">
                 <span class="link" v-text="dashIfEmpty(row.userName)" />
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
-            </QTd>
+            </div>
         </template>
         <template #column-shippedDate="{ row }">
-            <QTd class="no-padding">
             <QBadge
                 v-bind="getBadgeAttrs(row.shippedDate)"
                 class="q-pa-sm"
@@ -455,15 +447,12 @@ const openTab = (id) =>
             >
                 {{ formatShippedDate(row.shippedDate) }}
             </QBadge>
-            </QTd>
         </template>
         <template #column-provinceFk="{ row }">
-            <QTd class="no-padding">
             <span :title="row.province" v-text="row.province" />
-            </QTd>
         </template>
         <template #column-state="{ row }">
-            <QTd class="no-padding" @click.stop.prevent>
+            <div @click.stop.prevent>
                 <div v-if="row.refFk">
                     <span class="link">{{ row.refFk }}</span>
                     <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
@@ -477,23 +466,20 @@ const openTab = (id) =>
                 >
                     {{ row.state }}
                 </QBadge>
-            </QTd>
+            </div>
         </template>
         <template #column-isFragile="{ row }">
-            <QTd class="no-padding">
             <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
                 <QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
             </QIcon>
-            </QTd>
         </template>
         <template #column-zoneFk="{ row }">
-            <QTd class="no-padding" @click.stop.prevent :title="row.zoneName">
+            <div @click.stop.prevent :title="row.zoneName">
                 <span class="link">{{ row.zoneName }}</span>
                 <ZoneDescriptorProxy :id="row.zoneFk" />
-            </QTd>
+            </div>
         </template>
         <template #column-totalWithVat="{ row }">
-            <QTd class="no-padding">
             <QBadge
                 :color="totalPriceColor(row) || 'transparent'"
                 :text-color="totalPriceColor(row) ? 'black' : 'white'"
@@ -502,7 +488,11 @@ const openTab = (id) =>
             >
                 {{ toCurrency(row.totalWithVat) }}
             </QBadge>
-            </QTd>
         </template>
     </VnTable>
 </template>
+<style lang="scss" scoped>
+td .q-icon {
+    margin: 0 2px;
+}
+</style>