From ca90f87064810511a9f53dbd26d895ee1d709f4d Mon Sep 17 00:00:00 2001
From: BrettS <168732306+Brett-S-OWB@users.noreply.github.com>
Date: Fri, 11 Jul 2025 15:01:12 +0200
Subject: [PATCH] =?UTF-8?q?Revert=20"Widen=20the=20main=20layout=20area=20?=
 =?UTF-8?q?and=20display=203=20cards=20on=20screen=20>=201400px=20(#2?=
 =?UTF-8?q?=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 28197272f282b64b65fdb0dd611e4854b73df75b.
---
 .../source/src/components/BaseCarousel.vue    |  2 +-
 .../koala/source/src/layouts/MainLayout.vue   | 20 ++-----------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index f25207bfdd..720d823255 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -48,7 +48,7 @@ const animated = ref<boolean>(true);
  * Group the items in chunks of 2 for large screens and 1 for small screens.
  */
 const groupedItems = computed(() => {
-  const groupSize = $q.screen.width > 1400 ? 3 : $q.screen.width > 800 ? 2 : 1;
+  const groupSize = $q.screen.width > 800 ? 2 : 1;
   return props.items.reduce((resultArray, item, index) => {
     const chunkIndex = Math.floor(index / groupSize);
     if (!resultArray[chunkIndex]) {
diff --git a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
index 366622ea92..fee95d6b71 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
@@ -116,23 +116,14 @@
     </q-drawer>
 
     <!-- Page container that takes the remaining height -->
-    <q-page-container
-      :class="[
-        'column',
-        'flex',
-        {
-          'centered-container': !isLargeScreen,
-          'centered-container-large': isLargeScreen,
-        },
-      ]"
-    >
+    <q-page-container class="column flex centered-container">
       <router-view />
     </q-page-container>
   </q-layout>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 const $q = useQuasar();
 
@@ -142,7 +133,6 @@ defineOptions({
 
 const drawer = ref(false);
 const themeMode = ref('auto');
-const isLargeScreen = computed(() => $q.screen.width > 1400);
 
 const setTheme = (mode: 'light' | 'dark' | 'auto') => {
   themeMode.value = mode;
@@ -173,10 +163,4 @@ onMounted(() => {
   margin-left: auto;
   margin-right: auto;
 }
-
-.centered-container-large {
-  max-width: 1400px;
-  margin-left: auto;
-  margin-right: auto;
-}
 </style>