From 946bb4fb1891369ca123eec2173eb66f5f146acf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Jun 2024 06:16:06 +0000
Subject: [PATCH] fix: properties alignment

---
 .../04_product-service/ServiceProperties.vue  | 105 +++++++++---------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index cfb52c19..41594bba 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -196,61 +196,62 @@ function confirmDelete(items: unknown[], index: number) {
         :class="
           index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
         "
-        :ref="`item-${index}`"
       >
-        <q-btn
-          id="btn-move-up-product"
-          icon="mdi-arrow-up"
-          dense
-          flat
-          round
-          :disable="index === 0"
-          style="color: hsl(var(--text-mute-2))"
-          @click="moveItemUp(formServiceProperties.additional, index)"
-        />
-        <q-btn
-          id="btn-move-down-product"
-          icon="mdi-arrow-down"
-          dense
-          flat
-          round
-          :disable="index === formServiceProperties.additional.length - 1"
-          style="color: hsl(var(--text-mute-2))"
-          @click="moveItemDown(formServiceProperties.additional, index)"
-        />
+        <div class="col row items-center">
+          <q-btn
+            id="btn-move-up-product"
+            icon="mdi-arrow-up"
+            dense
+            flat
+            round
+            :disable="index === 0"
+            style="color: hsl(var(--text-mute-2))"
+            @click="moveItemUp(formServiceProperties.additional, index)"
+          />
+          <q-btn
+            id="btn-move-down-product"
+            icon="mdi-arrow-down"
+            dense
+            flat
+            round
+            :disable="index === formServiceProperties.additional.length - 1"
+            style="color: hsl(var(--text-mute-2))"
+            @click="moveItemDown(formServiceProperties.additional, index)"
+          />
 
-        <q-avatar
-          size="md"
-          class="q-mx-lg"
-          style="background-color: var(--surface-3)"
-        >
-          {{ index + 1 }}
-        </q-avatar>
+          <q-avatar
+            size="md"
+            class="q-mx-lg"
+            style="background-color: var(--surface-3)"
+          >
+            {{ index + 1 }}
+          </q-avatar>
 
-        <!-- type -->
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          hide-bottom-space
-          class="col q-mr-md"
-          label="Properties Name"
-          option-label="label"
-          option-value="value"
-          :options="propertiesOption"
-          v-model="p.fieldName"
-        >
-          <template v-slot:option="scope">
-            <q-item
-              v-if="scope.opt && shouldShowItem(scope.opt)"
-              v-bind="scope.itemProps"
-              class="row items-center col-12"
-            >
-              {{ scope.opt.label }}
-            </q-item>
-          </template>
-        </q-select>
+          <!-- type -->
+          <q-select
+            dense
+            outlined
+            emit-value
+            map-options
+            hide-bottom-space
+            class="col q-mr-md"
+            label="Properties Name"
+            option-label="label"
+            option-value="value"
+            :options="propertiesOption"
+            v-model="p.fieldName"
+          >
+            <template v-slot:option="scope">
+              <q-item
+                v-if="scope.opt && shouldShowItem(scope.opt)"
+                v-bind="scope.itemProps"
+                class="row items-center col-12"
+              >
+                {{ scope.opt.label }}
+              </q-item>
+            </template>
+          </q-select>
+        </div>
 
         <div class="col">
           <q-select