ปรับ responesive

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -212,7 +212,7 @@ onMounted(() => {
 
 <template>
   <q-scroll-area
-    style="height: 100vh"
+    style="height: 100vh; width: auto"
     class="bg-white row col-12 text-dark q-pa-md"
   >
     <div class="text-weight-bold text-body2">

src/modules/08_KPI/components/Tab/TabMain.vue

@@ -35,7 +35,12 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable>
+  <q-splitter
+    v-model="splitterModel"
+    :horizontal="!$q.screen.gt.xs"
+    disable
+    v-if="$q.screen.gt.xs"
+  >
     <template v-slot:before>
       <q-tabs
         v-model="store.tabMain"
@@ -82,6 +87,24 @@ const splitterModel = ref<number>(12);
       </q-tab-panels>
     </template>
   </q-splitter>
+
+  <q-list bordered class="rounded-borders" v-else>
+    <q-expansion-item expand-separator label="จัดทำข้อตกลง">
+      <Assessment />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="รายงานความก้าวหน้า">
+      <Assessment :type="'evaluator'" />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
+      <Assessment :type="'commander'" />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="ไฟล์เอกสาร">
+      <File />
+    </q-expansion-item>
+  </q-list>
 </template>
 
 <style scoped>