refactor: responsive (#180)

* refactor: can open one dropdown whe lt.md

* style: update MainLayout background color and fix avatar border class name

* feat: add touch position binding for dropdown in ProfileMenu

* refactor: enhance icon styling in DrawerComponent

* fix: update screen size conditions

* feat: add responsive search and filter functionality in MainPage

* feat: update styling and functionality in BasicInformation and MainPage components

* feat: package view mode improve layout and responsiveness

* feat: improve layout and responsiveness of ProfileBanner component

* feat: enhance TreeView component with improved icon layout and cursor pointer styling

* feat: update DialogForm component to prevent text wrapping in the center column

* feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements

* feat: enhance ProfileBanner dark tab

* feat: 02 => responsive & responsibleArea type

* fix: layout header bg condition & 02 filter col

* feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog

* feat: 07 => enhance layout and responsiveness

* refactor: simplify header structure and improve layout consistency

* fix: improve text color in ItemCard and adjust responsive breakpoints in product service group

* refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components

* refactor: enhance styling and improve props flexibility in dialog and select components

* refactor: 05 => enhance layout responsiveness in quotation components

* refactor: 05 => enhance layout responsiveness

* refactor: 05 => formWorkerAdd

* refactor: 05 => formWorkerAdd Product table

* refactor: 05 => improve layout responsiveness and enhance component structure

* refactor: enhance grid view handling and improve component imports

* refactor: improve column classes for better layout consistency

* refactor: 09 => enhance layout structure and improve responsiveness in task order views

* refactor: 10 => enhance invoice main page layout and improve component interactions

* refactor: 13 => enhance receipt main page layout and improve component interactions

* refactor: 11 => enhance layout and improve responsiveness in credit note pages

* refactor: 01 => screen.sm search & filter

* refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms

---------

Co-authored-by: puriphatt <puriphat@frappet.com>

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

@@ -229,7 +229,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
             "
             @drop="detailEditorImageDrop"
             min-height="5rem"
-            class="q-mt-sm q-mb-xs"
+            class="q-mt-sm q-mb-xs col"
             :flat="!readonly"
             :readonly="readonly"
             :toolbar-color="
@@ -275,4 +275,8 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
 :deep(.q-editor__toolbar) {
   border-color: var(--surface-3) !important;
 }
+
+:deep(.q-editor.q-editor--default) {
+  width: 1px;
+}
 </style>

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

@@ -168,7 +168,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
       />
 
       <q-field
-        class="full-width"
+        class="col-12"
         outlined
         for="input-service-description"
         id="input-service-description"
@@ -180,31 +180,34 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
       >
         <q-editor
           dense
+          class="q-mt-sm q-mb-xs col"
           :model-value="
             readonly ? serviceDescription || '-' : serviceDescription || ''
           "
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
-          "
-          @drop="detailEditorImageDrop"
           min-height="5rem"
-          class="q-mt-sm q-mb-xs"
           :flat="!readonly"
           :readonly="readonly"
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
           :toolbar-color="
             readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
           "
-          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
           style="
             cursor: auto;
             color: var(--foreground);
             border-color: var(--surface-3);
           "
-          :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
+          "
+          @drop="detailEditorImageDrop"
         />
       </q-field>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.q-editor.q-editor--default) {
+  width: 1px;
+}
+</style>

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

@@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
 
     <div class="col-12 row q-col-gutter-sm">
       <q-select
+        behavior="menu"
         :readonly
         outlined
         dense

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

@@ -164,7 +164,7 @@ withDefaults(
       </div>
     </div>
 
-    <div class="col-12">
+    <div class="col-12 full-width">
       <q-table
         :columns="column"
         :rows="row"