fix: enhance layout and styling for TicketNotes, TicketPackage components

src/pages/Ticket/Card/TicketNotes.vue

@@ -55,8 +55,10 @@ async function handleSave(e) {
         auto-load
         url="ObservationTypes"
     />
-    <div class="flex justify-center">
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
             <CrudModel
+                class="fit"
                 ref="ticketNotesCrudRef"
                 data-key="TicketNotes"
                 url="TicketObservations"
@@ -65,14 +67,13 @@ async function handleSave(e) {
                 :data-required="crudModelRequiredData"
                 :default-remove="false"
                 auto-load
-            style="max-width: 800px"
             >
                 <template #body="{ rows }">
                     <QCard class="q-px-lg q-py-md">
                         <div
                             v-for="(row, index) in rows"
                             :key="index"
-                        class="q-mb-md row q-gutter-x-md"
+                            class="q-mb-md row items-center q-gutter-x-md"
                         >
                             <VnSelect
                                 :label="t('ticketNotes.observationType')"
@@ -123,5 +124,6 @@ async function handleSave(e) {
                     </QCard>
                 </template>
             </CrudModel>
+        </QPage>
     </div>
 </template>

src/pages/Ticket/Card/TicketPackage.vue

@@ -49,10 +49,14 @@ watch(
     <FetchData
         @on-fetch="(data) => (listPackagingsOptions = data)"
         auto-load
-        :filter="{ fields: ['packagingFk', 'name'], order: 'name ASC' }"
         url="Packagings/listPackaging"
+        :filter="{
+            fields: ['packagingFk', 'name'],
+            order: ['name ASC'],
+        }"
     />
-    <div class="flex justify-center">
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
             <CrudModel
                 ref="ticketPackagingsCrudRef"
                 data-key="TicketPackagings"
@@ -62,7 +66,6 @@ watch(
                 :data-required="crudModelRequiredData"
                 :default-remove="false"
                 auto-load
-            style="max-width: 800px"
             >
                 <template #body="{ rows, validate }">
                     <QCard class="q-px-lg q-py-md">
@@ -102,7 +105,10 @@ watch(
                                 @update:model-value="handleInputQuantityClear(row)"
                                 :rules="validate('TicketPackaging.quantity')"
                             />
-                        <VnInputDate :label="t('package.added')" v-model="row.created" />
+                            <VnInputDate
+                                :label="t('package.added')"
+                                v-model="row.created"
+                            />
                             <QIcon
                                 name="delete"
                                 size="sm"
@@ -132,5 +138,6 @@ watch(
                     </QCard>
                 </template>
             </CrudModel>
+        </QPage>
     </div>
 </template>

src/pages/Ticket/TicketAdvance.vue

@@ -385,7 +385,12 @@ watch(
         if (!$el) return;
         const head = $el.querySelector('thead');
         const firstRow = $el.querySelector('thead > tr');
-
+        const headSelectionCol = $el.querySelector(
+            'thead tr.bg-header th.q-table--col-auto-width',
+        );
+        if (headSelectionCol) {
+            headSelectionCol.classList.add('horizontal-separator');
+        }
         const newRow = document.createElement('tr');
         destinationElRef.value = document.createElement('th');
         originElRef.value = document.createElement('th');
@@ -394,8 +399,8 @@ watch(
         destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
         originElRef.value.classList.add('text-uppercase', 'color-vn-label');
 
-        destinationElRef.value.setAttribute('colspan', '7');
-        originElRef.value.setAttribute('colspan', '9');
+        destinationElRef.value.setAttribute('colspan', '10');
+        originElRef.value.setAttribute('colspan', '10');
 
         destinationElRef.value.textContent = `${t(
             'advanceTickets.destination',
@@ -490,8 +495,6 @@ watch(
                 selection: 'multiple',
             }"
             v-model:selected="selectedTickets"
-            :pagination="{ rowsPerPage: 0 }"
-            :no-data-label="$t('globals.noResults')"
             :right-search="false"
             :order="['futureTotalWithVat ASC']"
             auto-load