refactor: workflow => improve responsive

src/components/04_flow-management/FormFlow.vue

@@ -180,12 +180,12 @@ onMounted(async () => {
 
     <section class="col-12 row q-col-gutter-sm">
       <SelectBranch
+        v-if="role.includes('system')"
         :label="$t('branch.form.code')"
         :readonly
         code-only
         v-model:value="registerBranchId"
-        v-if="role.includes('system')"
+        class="col-md-3 col-12"
-        class="col-3"
         required
       />
       <q-input
@@ -389,7 +389,7 @@ onMounted(async () => {
                   <q-input
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
-                    class="col-6"
+                    class="col-md-6 col-12"
                     type="textarea"
                     dense
                     outlined
@@ -400,7 +400,7 @@ onMounted(async () => {
                     "
                   />
 
-                  <div class="col-6">
+                  <div class="col-md-6 col-12">
                     <div
                       class="surface-1 rounded bordered full-height"
                       style="padding-inline: 12px"
@@ -452,6 +452,7 @@ onMounted(async () => {
                   <!-- RESPONSIBLE-PERSON -->
                   <q-select
                     v-if="step.responsiblePersonId"
+                    behavior="menu"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -464,7 +465,7 @@ onMounted(async () => {
                     option-value="value"
                     emit-value
                     :label="$t('flow.responsiblePerson')"
-                    class="col-6"
+                    class="col-md-6 col-12"
                     :hide-dropdown-icon="readonly"
                   >
                     <template v-slot:selected-item="scope">
@@ -653,6 +654,7 @@ onMounted(async () => {
 
                   <!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
                   <q-select
+                    behavior="menu"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -667,7 +669,7 @@ onMounted(async () => {
                     :label="
                       $t('general.select', { msg: $t('general.agencies') })
                     "
-                    class="col-6"
+                    class="col-md-6 col-12"
                     :hide-dropdown-icon="readonly"
                   >
                     <template v-slot:selected-item="scope">
@@ -785,4 +787,8 @@ onMounted(async () => {
   ) {
   visibility: hidden;
 }
+
+:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
+  visibility: hidden;
+}
 </style>

src/pages/04_flow-managment/MainPage.vue

@@ -21,6 +21,7 @@ import FlowDialog from './FlowDialog.vue';
 import NoData from 'src/components/NoData.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import { useQuasar } from 'quasar';
 
 const { t } = useI18n();
 const workflowStore = useWorkflowTemplate();
@@ -32,6 +33,8 @@ const {
 } = storeToRefs(workflowStore);
 const navigatorStore = useNavigator();
 
+const $q = useQuasar();
+
 const pageState = reactive({
   hideStat: false,
   inputSearch: '',
@@ -283,6 +286,7 @@ async function fetchWorkflowList() {
 onMounted(async () => {
   navigatorStore.current.title = 'flow.title';
   navigatorStore.current.path = [{ text: 'flow.caption', i18n: true }];
+  pageState.gridView = $q.screen.lt.md ? true : false;
 
   await fetchWorkflowList();
 });
@@ -481,7 +485,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
           />
         </article>
 
-        <article v-else class="col q-pa-md surface-2 scroll">
+        <article v-else class="col q-pa-md surface-2 scroll full-width">
           <q-table
             flat
             bordered