fix: product q-field

src/components/04_product-service/ฺBasicInfoProduct.vue

@@ -15,12 +15,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="row col-10">
-    <div class="col-4 app-text-muted">
+  <div class="col-3 app-text-muted">
     • {{ $t(`formDialogTitleInformation`) }}
   </div>
 
-    <div class="col-8 row q-col-gutter-md">
+  <div class="col-9 row q-col-gutter-md">
     <q-input
       for="input-code"
       :outlined="!readonly"
@@ -59,7 +58,7 @@ defineProps<{
       autogrow
     />
 
-      <div class="col-12" v-if="readonly">
+    <!-- <div class="col-12" v-if="readonly">
       <q-field
         class="rounded"
         :class="{ 'surface-2': remark !== undefined }"
@@ -84,22 +83,30 @@ defineProps<{
           </div>
         </template>
       </q-field>
-      </div>
+    </div> -->
 
-      <div class="col-12" v-else>
+    <div class="col-12">
       <q-field
-          class="full-width q-pb-md"
+        class="full-width"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
         :label="$t('detail')"
         stack-label
-          outlined
         dense
       >
         <q-editor
           dense
-            class="rounded full-width"
           v-model="remark"
           min-height="5rem"
-            style="border: none; cursor: auto; color: black; height: 80%"
+          class="full-width q-mt-sm q-mb-xs"
+          :flat="!readonly"
+          :readonly="readonly"
+          :toolbar-color="
+            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+          "
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+          style="cursor: auto; color: black"
         />
       </q-field>
 
@@ -131,11 +138,11 @@ defineProps<{
       type="number"
     />
   </div>
-  </div>
+
   <q-separator
     v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
   />
 </template>
 
@@ -143,4 +150,8 @@ defineProps<{
 .q-editor__toolbar {
   border-bottom: none !important;
 }
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-3) !important;
+}
 </style>