refactor: 05 => enhance layout and styling for FormAbout component

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>