Widen the main layout area and display 3 cards on screen > 1400px (#2547)

Author: Brett-S-OWB

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 > 800 ? 2 : 1;
+  const groupSize = $q.screen.width > 1400 ? 3 : $q.screen.width > 800 ? 2 : 1;
   return props.items.reduce((resultArray, item, index) => {
     const chunkIndex = Math.floor(index / groupSize);
     if (!resultArray[chunkIndex]) {

packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue

@@ -116,14 +116,23 @@
     </q-drawer>
 
     <!-- Page container that takes the remaining height -->
-    <q-page-container class="column flex centered-container">
+    <q-page-container
+      :class="[
+        'column',
+        'flex',
+        {
+          'centered-container': !isLargeScreen,
+          'centered-container-large': isLargeScreen,
+        },
+      ]"
+    >
       <router-view />
     </q-page-container>
   </q-layout>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 const $q = useQuasar();
 
@@ -133,6 +142,7 @@ 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;
@@ -163,4 +173,10 @@ onMounted(() => {
   margin-left: auto;
   margin-right: auto;
 }
+
+.centered-container-large {
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>