From df1bf1b67f0c633de7aa3c1612ca15e98fc925a3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 28 Jan 2025 11:26:09 +0700
Subject: [PATCH] refactor: 05 => enhance layout and styling for FormAbout
 component

---
 src/components/05_quotation/FormAbout.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index df65761d..661ea581 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -54,11 +54,15 @@ defineEmits<{
         />
       </div>
     </div>
-    <div class="col-12 row q-col-gutter-sm">
+    <div class="col-12 row" :class="{ 'q-col-gutter-sm': !inputOnly }">
       <SelectBranch
         v-model:value="branchId"
         :label="$t('quotation.branchVirtual')"
         class="col-md-6 col-12"
+        :class="{
+          'field-one': inputOnly && $q.screen.gt.sm,
+          'q-mb-sm': inputOnly && $q.screen.lt.md,
+        }"
         simple
         required
         :readonly
@@ -71,6 +75,7 @@ defineEmits<{
         })})`"
         @create="$emit('addCustomer')"
         class="col-md-6 col-12"
+        :class="{ 'field-two': inputOnly && $q.screen.gt.sm }"
         :creatable-disabled="!branchId"
         :creatable="!inputOnly"
         simple
@@ -80,3 +85,17 @@ defineEmits<{
     </div>
   </div>
 </template>
+
+<style scoped>
+:deep(
+    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
+  ) {
+  padding-right: 4px;
+}
+
+:deep(
+    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
+  ) {
+  padding-left: 4px;
+}
+</style>