fix(04): product service (unfinish)

src/components/04_product-service/BasicInformation.vue

@@ -107,7 +107,7 @@ const branchFilter = selectFilterOptionRefMod(
       />
     </div>
 
-    <div v-if="service" class="col-9 row q-col-gutter-md">
+    <div v-if="service" class="col-12 row q-col-gutter-sm">
       <q-input
         lazy-rules="ondemand"
         id="input-service-code"

src/components/04_product-service/FormServiceProperties.vue

@@ -18,46 +18,50 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">
-    • {{ $t(`properties`) }}
-    <div>
+  <div class="full-width full-height">
+    <div
+      class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
+      style="background: hsla(var(--info-bg) / 0.1)"
+    >
+      {{ $t(`serviceProperties`) }}
+
       <q-btn
         :disable="readonly"
         dense
+        flat
         unelevated
-        outline
-        class="q-mt-sm q-px-sm"
-        color="primary"
+        class="q-px-sm"
+        color="info"
         @click="$emit('serviceProperties')"
       >
         <Icon
           icon="basil:settings-adjust-solid"
           width="24px"
           class="q-mr-sm"
-          style="color: var(--brand-1)"
+          style="color: hsl(var(--info-bg))"
         />
-        {{ $t('properties') }}
+        {{ $t('serviceProperties') }}
       </q-btn>
     </div>
-  </div>
 
-  <div class="col-9 row">
-    <div
-      v-if="serviceAttributes.additional.length > 0"
-      class="col q-gutter-sm row items-center"
-    >
+    <div class="col-12 row q-px-md q-py-xs items-center surface-1 scroll">
       <div
-        v-for="(p, index) in serviceAttributes.additional"
-        :key="index"
-        class="bordered q-px-sm surface-3"
-        style="border-radius: 6px"
+        v-if="serviceAttributes.additional.length > 0"
+        class="row items-center q-gutter-sm items-center"
       >
-        {{ optionStore.mapOption(p.fieldName ?? '') }}
+        <div
+          v-for="(p, index) in serviceAttributes.additional"
+          :key="index"
+          class="bordered q-px-sm surface-3"
+          style="border-radius: 6px"
+        >
+          {{ optionStore.mapOption(p.fieldName ?? '') }}
+        </div>
       </div>
-    </div>
 
-    <div v-else class="col flex items-center app-text-muted">
-      {{ $t('noProperties') }}
+      <div v-else class="col flex items-center app-text-muted">
+        {{ $t('noProperties') }}
+      </div>
     </div>
   </div>
 </template>