From 2e4952993442ac56d9b5efa9e11d1e8f08837498 Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Tue, 9 Jul 2024 09:23:17 +0700
Subject: [PATCH] Fix Responsive

---
 .../categories/categories/Vertical.vue        |  4 +--
 .../page-section/layouts/none/Default.vue     | 25 ++++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
index db2696a..ac0c203 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
@@ -37,7 +37,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+  <div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div class="category-content">
@@ -45,7 +45,7 @@ const mapActivesToItems = (index: number) => {
             <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
           </svg>
 
-          <h3 :style="mapActivesToItems(index)['h3.categories']">
+          <h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
             {{ component.title }}
           </h3>
         </div>
diff --git a/components/dynamic-page/page-section/layouts/none/Default.vue b/components/dynamic-page/page-section/layouts/none/Default.vue
index aa41c09..dd400ff 100644
--- a/components/dynamic-page/page-section/layouts/none/Default.vue
+++ b/components/dynamic-page/page-section/layouts/none/Default.vue
@@ -173,8 +173,9 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
       _classForSection = {
-        section_layout: "section_layout three_col_layout",
-        1: "col-span-2",
+        section_layout: "section_layout grid-cols-12",
+        0: "md:col-span-4 col-span-12",
+        1: "md:col-span-8 col-span-12",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
@@ -195,20 +196,20 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
       case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
       _classForSection = {
-        section_layout: "section_layout twelve_col_layout",
-        0: "col-span-5",
-        1: "col-span-2",
-        2: "col-span-2",
-        3: "col-span-3",
+        section_layout: "section_layout grid-cols-12",
+        0: "md:col-span-5 col-span-12",
+        1: "md:col-span-2 sm:col-span-6 col-span-1",
+        2: "md:col-span-2 sm:col-span-6 col-span-2",
+        3: "md:col-span-3 col-span-12",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
       _classForSection = {
-        section_layout: "section_layout grid-cols-12 123",
-        0: "col-span-2",
-        1: "col-span-5",
-        2: "col-span-3",
-        3: "col-span-2",
+        section_layout: "section_layout grid-cols-12",
+        0: "col-span-2 md:block hidden",
+        1: "md:col-span-5 sm:col-span-7 col-span-12",
+        2: "md:col-span-3 sm:col-span-5 col-span-12",
+        3: "col-span-2 md:block hidden",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]: