fix(test-detail): refine responsive answer option layout

app/components/common/detail/BoxRandomQuestion.vue

@@ -42,7 +42,6 @@
       v-if="!loadingRandomTest && randomTestContent"
       :content-data="randomTestContent"
       :show-chips="false"
-      :show-title="false"
       button-next-text="Time to Test!"
     />
   </div>

app/components/common/header.vue

@@ -133,8 +133,9 @@
 
     <lazy-common-modal-base
       v-model:show-dialog="isAddOptionOpen"
-      title="What would you like to create?"
+      title="What would you like to publish?"
       subtitle="Choose a type. We will prepare the right form for you."
+      :max-width="560"
     >
       <menu-add-option-bottom-menu
         @close="isAddOptionOpen = false"

app/components/menu/AddOptionBottomMenu.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="w-100 d-flex align-center justify-center flex-column mt-4">
-    <div class="w-100 d-flex flex-wrap justify-center ga-1 container-card">
+    <div class="w-100 d-flex flex-wrap justify-center ga-2 container-card">
       <nuxt-link
-        v-for="(item, index) in addOptions"
-        :key="index"
+        v-for="item in addOptions"
+        :key="item.title"
         :to="item.path"
-        class="card-add-option mt-1 d-flex flex-column align-center justify-center ga-1 rounded-xl"
+        :aria-label="`${item.title} — ${item.typeFile}`"
+        class="card-add-option d-flex flex-column align-center justify-center text-center ga-1 rounded-xl"
       >
         <div class="icon-div rounded-lg pa-2 d-flex align-center justify-center bg-primary100">
           <span
@@ -21,9 +22,9 @@
             {{ item.iconMd }}
           </v-icon>
         </div>
-        <span class="text-grey700 text-h6 font-weight-bold mt-1">{{ item.title }}</span>
+        <span class="card-option-title w-100 text-center text-grey700 text-h6 font-weight-bold mt-1">{{ item.title }}</span>
 
-        <span class="text-subtitle-2 font-weight-bold text-grey500 px-2 rounded-pill bg-grey100 mt-1 chip-type-file">
+        <span class="text-center text-subtitle-2 font-weight-bold text-grey500 px-2 rounded-pill bg-grey100 chip-type-file">
           {{ item.typeFile }}
         </span>
       </nuxt-link>
@@ -39,8 +40,8 @@
         </v-icon>
       </div>
       <div class="d-flex flex-column align-start justify-start ">
-        <span class="text-subtitle-1 font-weight-bold text-grey700">Earn points and income</span>
-        <span class="text-subtitle-2 font-weight-medium text-grey400">Publishing useful educational content rewards you with Gamatrain points and can generate income.</span>
+        <span class="text-subtitle-1 font-weight-bold text-grey700">Turn your expertise into reputation and income</span>
+        <span class="text-subtitle-2 font-weight-medium text-grey400">Publish educational content to boost your score and earn from sales.</span>
       </div>
     </div>
   </div>
@@ -50,38 +51,69 @@
 const route = useRoute()
 const emit = defineEmits(['close'])
 
-const addOptions = [
+interface AddOption {
+  path: string
+  title: string
+  typeFile: string
+  icon?: string
+  iconMd?: string
+}
+
+const addOptions: AddOption[] = [
+  {
+    path: '/user/paper/create',
+    title: 'Worksheet',
+    iconMd: 'md:description_outlined',
+    typeFile: 'PDF · DOCX',
+  },
   {
     path: '/user/paper/create',
-    title: 'Past Paper',
+    title: 'Predicted Paper',
     icon: 'icon-paper',
-    typeFile: 'PDF - DOCX',
+    typeFile: 'PDF · DOCX',
   },
   {
-    path: '/user/question/create',
-    title: 'Q & A',
-    icon: 'icon-q-a',
-    typeFile: 'TEXT',
+    path: '/user/paper/create',
+    title: 'Study Guide',
+    iconMd: 'md:menu_book',
+    typeFile: 'PDF · DOCX',
+  },
+  {
+    path: '/user/paper/create',
+    title: 'Topical Questions',
+    iconMd: 'md:quiz_outlined',
+    typeFile: 'PDF · DOCX',
   },
   {
     path: '/user/multimedia/create',
-    title: 'Multimedia',
-    icon: 'icon-multimedia',
-    typeFile: 'MP4 - PPTX',
+    title: 'Video',
+    iconMd: 'md:videocam',
+    typeFile: 'MP4',
   },
   {
-    path: '/user/blogs/create',
-    title: 'Blogs',
-    iconMd: 'md:art_track',
-    typeFile: 'HTML',
+    path: '/user/multimedia/create',
+    title: 'Presentation',
+    iconMd: 'md:slideshow',
+    typeFile: 'PPTX',
   },
   {
     path: '/school/add',
-    title: 'Schools',
+    title: 'School',
     icon: 'icon-school',
     typeFile: 'INFO',
   },
-
+  {
+    path: '/user/question/create',
+    title: 'Q&A',
+    icon: 'icon-q-a',
+    typeFile: 'TEXT',
+  },
+  {
+    path: '/user/blogs/create',
+    title: 'Blogs',
+    iconMd: 'md:art_track',
+    typeFile: 'HTML',
+  },
 ]
 
 watch(
@@ -99,7 +131,8 @@ watch(
 .card-add-option{
   width : 30%;
   max-width : 120px;
-  height : 120px;
+  height : 112px;
+  padding-top: 8px;
   border : 1px solid rgb(var(--v-theme-grey200));
   transition: 0.3s;
   text-decoration: none;
@@ -118,4 +151,26 @@ watch(
   max-width : 320px;
   border : 1px solid rgb(var(--v-theme-primary100))
 }
+
+@media only screen and (max-width: 599.98px) {
+  .card-option-title {
+    padding-inline: 8px;
+    font-size: calc(1.25rem - 1px) !important;
+    line-height: 1.25rem;
+  }
+}
+
+@media only screen and (min-width: 960px) {
+  .container-card {
+    max-width: 480px;
+  }
+
+  .card-add-option {
+    max-width: 144px;
+  }
+
+  .card-option-title {
+    padding-inline: 8px;
+  }
+}
 </style>

app/components/menu/BottomNavMenu.vue

@@ -109,8 +109,9 @@
 
   <lazy-common-modal-base
     v-model:show-dialog="isAddOptionOpen"
-    title="What would you like to create?"
+    title="What would you like to publish?"
     subtitle="Choose a type. We will prepare the right form for you."
+    :max-width="560"
   >
     <menu-add-option-bottom-menu
       @close="isAddOptionOpen = false"