fix: layout

src/components/05_quotation/ProductItem.vue

@@ -46,7 +46,7 @@ const groupList = ref<
     title: string;
     product: QuotationPayload['productServiceList'][number][];
   }[]
->([]);
+>([{ title: '', product: [] }]);
 
 const finalDiscount = defineModel<number>('finalDiscount', { default: 0 });
 
@@ -183,7 +183,6 @@ function openEmployeeTable(title: string, index: number) {
 }
 
 function groupByServiceId() {
-  console.log(rows.value);
   const groupedItems: {
     title: string;
     product: QuotationPayload['productServiceList'][number][];
@@ -247,7 +246,6 @@ function groupByServiceId() {
   }
 
   groupList.value = groupedItems;
-  console.log(groupedItems);
 }
 
 watch(

src/pages/05_quotation/QuotationForm.vue

@@ -567,18 +567,17 @@ watch(
     </header>
 
     <article
-      class="row col"
+      class="row col full-width q-pa-md"
       style="flex-grow: 1; overflow-y: hidden"
       :style="{
         overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
       }"
     >
       <section
-        class="col-12 col-sm-9 row"
+        class="col-sm col-12 row scroll"
-        style="padding: var(--size-3); overflow-y: auto"
+        :class="{
-        :style="{
+          'full-height q-mr-md': $q.screen.gt.xs,
-          paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
+          'q-mb-md': $q.screen.lt.md,
-          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
         }"
       >
         <div class="col q-gutter-y-md">
@@ -755,12 +754,8 @@ watch(
       </section>
 
       <div
-        class="col-12 col-sm-3"
+        class="col-12 col-md-3 col-sm-4 scroll"
-        style="padding: var(--size-3); overflow-y: auto"
+        :class="{ 'full-height': $q.screen.gt.xs }"
-        :style="{
-          paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
-          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
-        }"
       >
         <QuotationFormInfo
           v-model:urgent="quotationFormData.urgent"