From cc67235b384b4adf39c5142ba6405cb58020b582 Mon Sep 17 00:00:00 2001
From: foxlee2525 <140967832+foxlee2525@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:59:10 +0800
Subject: [PATCH 1/2] fix(about/coc):  fix responsive breakpoint for two-column
 layout

Fixed the issue where the grid layout did not activate at the intended screen size.
---
 components/core/layout/TwoColWrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/core/layout/TwoColWrapper.vue b/components/core/layout/TwoColWrapper.vue
index 0ecf043b23..e86c91efd5 100644
--- a/components/core/layout/TwoColWrapper.vue
+++ b/components/core/layout/TwoColWrapper.vue
@@ -19,7 +19,7 @@ export default {
 
 <style lang="postcss" scpoed>
 .two-col-layout {
-    @media (min-width: 1024px) {
+    @media (min-width: 1194px) {
         grid-template-columns: 1fr 5fr;
     }
 }

From d55880661415a8ca53d435eaaef60a84a2c72f87 Mon Sep 17 00:00:00 2001
From: foxlee2525 <140967832+foxlee2525@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:12:57 +0800
Subject: [PATCH 2/2] refactor(taildwindCSS): Adjust layout for updated lg
 breakpoint and modify affected pages

- Refactored Tailwind `lg` breakpoint from 1024px to 1194px in tailwind.config.js.
- Updated affected pages and media queries to align with the new breakpoint and ensure consistent grid behavior.
---
 components/core/layout/TwoColWrapper.vue  | 2 +-
 components/events/EventCardCollection.vue | 5 ++++-
 pages/conference/poster-session.vue       | 2 +-
 pages/events/overview.vue                 | 2 +-
 tailwind.config.js                        | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/core/layout/TwoColWrapper.vue b/components/core/layout/TwoColWrapper.vue
index e86c91efd5..0ecf043b23 100644
--- a/components/core/layout/TwoColWrapper.vue
+++ b/components/core/layout/TwoColWrapper.vue
@@ -19,7 +19,7 @@ export default {
 
 <style lang="postcss" scpoed>
 .two-col-layout {
-    @media (min-width: 1194px) {
+    @media (min-width: 1024px) {
         grid-template-columns: 1fr 5fr;
     }
 }
diff --git a/components/events/EventCardCollection.vue b/components/events/EventCardCollection.vue
index 920a0032a6..1df61dcc12 100644
--- a/components/events/EventCardCollection.vue
+++ b/components/events/EventCardCollection.vue
@@ -12,12 +12,15 @@ export default {
 
 <style lang="postcss" scoped>
 .eventCardCollection {
-    @apply mx-0 grid grid-cols-1 justify-items-center sm:grid-cols-2 md:mx-4 lg:grid-cols-3;
+    @apply mx-0 grid grid-cols-1 justify-items-center sm:grid-cols-2 md:mx-4;
     column-gap: 24px;
     row-gap: 32px;
     @media (min-width: 415px) {
         column-gap: 36px;
         row-gap: 42px;
     }
+    @media (min-width: 1194px) {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
 }
 </style>
diff --git a/pages/conference/poster-session.vue b/pages/conference/poster-session.vue
index 5e58dc125e..4a646f1310 100644
--- a/pages/conference/poster-session.vue
+++ b/pages/conference/poster-session.vue
@@ -7,7 +7,7 @@
                 <template #br><br /></template>
             </i18n>
         </banner>
-        <i18n-page-wrapper class="px-2 sm:px-8 md:px-16 lg:px-32" custom-x>
+        <i18n-page-wrapper class="px-2 sm:px-8 md:px-16" custom-x>
             <div class="poster-session__container">
                 <article
                     v-for="poster in $t('posters')"
diff --git a/pages/events/overview.vue b/pages/events/overview.vue
index 4a8c6c1ee7..d060ea8a36 100644
--- a/pages/events/overview.vue
+++ b/pages/events/overview.vue
@@ -170,6 +170,6 @@ export default {
 
 <style scoped>
 .pageWrapper {
-    @apply px-4 md:px-32;
+    @apply px-4 lg:px-32;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1e1e3c4db7..03e1bd9648 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -97,7 +97,7 @@ module.exports = {
             xs: '360px',
             sm: '640px',
             md: '768px',
-            lg: '1194px',
+            lg: '1024px',
             xl: '1440px',
             '2xl': '1600px',
         },