From 92b95c5ca5daaf308cac202ab6261e4b273c2d0c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 11 Jul 2025 13:58:01 +0200
Subject: [PATCH 1/4] Widen the main layout area and display 3 cards on screen
 > 1400px

---
 .../source/src/components/BaseCarousel.vue    |  2 +-
 .../koala/source/src/layouts/MainLayout.vue   | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 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 720d823255..f25207bfdd 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 > 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]) {
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 fee95d6b71..366622ea92 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/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>

From 0531f4dbf502e6650f6b8a3ec824795638a4bb96 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 11 Jul 2025 16:29:52 +0200
Subject: [PATCH 2/4] Add canvas css for Chart.JS chart responsiveness

---
 .../src/components/charts/historyChart/HistoryChart.vue      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index b19ef5697b..d87d8f3283 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -376,4 +376,9 @@ const chartOptions = computed(() => ({
   flex: 1;
   min-height: 0;
 }
+
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
 </style>

From d504fe72fdcb235176560654def0c8d10b977c87 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 17 Jul 2025 16:00:16 +0200
Subject: [PATCH 3/4] q-page-container changed to media query

---
 .../charts/historyChart/HistoryChart.vue      |  2 +-
 .../koala/source/src/layouts/MainLayout.vue   | 22 +++++--------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index d87d8f3283..447b6caa32 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -377,7 +377,7 @@ const chartOptions = computed(() => ({
   min-height: 0;
 }
 
-canvas {
+.chart-wrapper > canvas {
   width: 100% !important;
   height: 100% !important;
 }
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..c787fb655a 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;
@@ -174,9 +164,9 @@ onMounted(() => {
   margin-right: auto;
 }
 
-.centered-container-large {
-  max-width: 1400px;
-  margin-left: auto;
-  margin-right: auto;
+@media (min-width: 1400px) {
+  .centered-container {
+    max-width: 1400px;
+  }
 }
 </style>

From 49dc67a44e342c665a8e1d75223f03f2a9c5c26f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 17 Jul 2025 16:02:24 +0200
Subject: [PATCH 4/4] Carousel cards grouped based on carousel & card width

---
 .../source/src/components/BaseCarousel.vue    | 138 +++++++++++-------
 .../source/src/components/BatteryCard.vue     |  14 +-
 .../src/components/BatteryInformation.vue     |  10 +-
 .../source/src/components/ChargePointCard.vue |  14 +-
 .../src/components/ChargePointInformation.vue |   5 +-
 .../source/src/components/VehicleCard.vue     |  14 +-
 .../src/components/VehicleInformation.vue     |   5 +-
 7 files changed, 139 insertions(+), 61 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..04ee7100e0 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -1,5 +1,6 @@
 <template>
   <q-carousel
+    ref="carouselRef"
     v-model="currentSlide"
     swipeable
     :animated="animated"
@@ -33,24 +34,96 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue';
 import { useQuasar } from 'quasar';
 
 const props = defineProps<{
   items: number[];
+  cardWidth?: number;
 }>();
 
 const $q = useQuasar();
 const currentSlide = ref<number>(0);
 const animated = ref<boolean>(true);
+const carouselRef = ref<{ $el: HTMLElement } | null>(null);
+const carouselWidth = ref(0);
+let resizeObserver: ResizeObserver | null = null;
+const maxCardHeight = ref<number>(0);
+
+// Calculates and sets the maximum card height for all cards in the active slide
+const updateMaxCardHeight = () => {
+  // Quasar adds CSS class .q-carousel__slide--active when the slide is active - calculation then made only on active slide/s
+  const cards = document.querySelectorAll(
+    '.q-carousel__slide--active .item-container',
+  );
+  const heights = Array.from(cards).map(
+    (card) => (card as HTMLElement).offsetHeight,
+  );
+  maxCardHeight.value = Math.max(...heights);
+};
 
-/**
- * Group the items in chunks of 2 for large screens and 1 for small screens.
- */
+// Sets up a MutationObserver to watch for changes in the cards of the active slide
+const observeCardChanges = () => {
+  const observer = new MutationObserver(() => {
+    updateMaxCardHeight();
+  });
+  const cards = document.querySelectorAll(
+    '.q-carousel__slide--active .item-container',
+  );
+  cards.forEach((card) => {
+    observer.observe(card, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (carouselRef.value && carouselRef.value.$el) {
+      carouselWidth.value = carouselRef.value.$el.offsetWidth;
+      // Set up ResizeObserver to update width and card height on resize
+      resizeObserver = new ResizeObserver(() => {
+        if (carouselRef.value && carouselRef.value.$el) {
+          carouselWidth.value = carouselRef.value.$el.offsetWidth;
+          updateMaxCardHeight();
+        }
+      });
+      resizeObserver.observe(carouselRef.value.$el);
+    }
+    // Calculate initial card height and set up MutationObserver
+    updateMaxCardHeight();
+    observeCardChanges();
+  });
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver && carouselRef.value && carouselRef.value.$el) {
+    resizeObserver.unobserve(carouselRef.value.$el);
+  }
+});
+
+const effectiveCardWidth = ref<number | undefined>(undefined);
+
+// Computes how many cards can fit in the carousel based on carousel width and the card width
+const groupSize = computed(() => {
+  return effectiveCardWidth.value
+    ? Math.max(1, Math.floor(carouselWidth.value / effectiveCardWidth.value))
+    : 380;
+});
+
+// Groups the items into arrays for each slide, based on the computed group size
 const groupedItems = computed(() => {
-  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);
+    const chunkIndex = Math.floor(index / groupSize.value);
     if (!resultArray[chunkIndex]) {
       resultArray[chunkIndex] = [];
     }
@@ -59,11 +132,7 @@ const groupedItems = computed(() => {
   }, [] as number[][]);
 });
 
-/**
- * Update the current slide when the grouped items change.
- * This may happen when the items are sorted or filtered or when the screen size changes.
- * We try to keep the same item in view when the slide changes.
- */
+// Updates the current slide and recalculates card heights when the grouped items change
 watch(
   () => groupedItems.value,
   async (newValue, oldValue) => {
@@ -74,7 +143,6 @@ watch(
       currentSlide.value = 0;
       return;
     }
-    // Prevent animation when the current slide is modified
     animated.value = false;
     currentSlide.value = Math.max(
       findSlide(oldValue[currentSlide.value][0]),
@@ -82,9 +150,12 @@ watch(
     );
     await nextTick();
     animated.value = true;
+    updateMaxCardHeight();
+    observeCardChanges();
   },
 );
 
+// Called when the slide changes; recalculates card heights and scrolls to the previous position
 const handleSlideChange = () => {
   const currentScroll = window.scrollY;
   nextTick(() => {
@@ -94,44 +165,13 @@ const handleSlideChange = () => {
   });
 };
 
-const maxCardHeight = ref<number>(0);
-
-const updateMaxCardHeight = () => {
-  const cards = document.querySelectorAll('.item-container');
-  const heights = Array.from(cards).map(
-    (card) => (card as HTMLElement).offsetHeight,
-  );
-  maxCardHeight.value = Math.max(...heights);
-};
-
-const observeCardChanges = () => {
-  const observer = new MutationObserver(() => {
-    updateMaxCardHeight();
-  });
-  const cards = document.querySelectorAll('.item-container');
-  cards.forEach((card) => {
-    observer.observe(card, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-    });
-  });
-};
-
-onMounted(() => {
-  nextTick(() => {
-    updateMaxCardHeight();
-    observeCardChanges();
-  });
-});
-
+// watches cardWidth prop because it takes time to be emitted and passed through component hierarchy
 watch(
-  () => props.items,
-  () => {
-    nextTick(() => {
-      updateMaxCardHeight();
-      observeCardChanges();
-    });
+  () => props.cardWidth,
+  (newVal) => {
+    if (newVal && newVal > 0) {
+      effectiveCardWidth.value = newVal + 72; // Add 72px to account for padding / margins / navigation buttons in carousel
+    }
   },
 );
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index f914a01250..16bdaaaded 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card class="full-height card-width">
+  <q-card ref="cardRef" class="full-height card-width">
     <q-card-section>
       <div class="row text-h6 items-center text-bold justify-between">
         <div>
@@ -62,12 +62,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import BatterySettingsDialog from './BatterySettingsDialog.vue';
 import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 import SliderDouble from './SliderDouble.vue';
 
+const cardRef = ref<{ $el: HTMLElement } | null>(null);
+const emit = defineEmits<{
+  (event: 'card-width', width: number | undefined): void;
+}>();
+
 const props = defineProps<{
   batteryId: number | undefined;
 }>();
@@ -131,6 +136,11 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
+
+onMounted(() => {
+  const cardWidth = cardRef.value?.$el.clientWidth;
+  emit('card-width', cardWidth);
+});
 </script>
 
 <style scoped>
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
index 0924078c35..48aeaa6d2d 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
@@ -1,21 +1,23 @@
 <template>
   <div v-if="showBatteryOverview" class="row justify-center">
-    <BatteryCard :battery-id="undefined" />
+    <BatteryCard :battery-id="undefined"/>
   </div>
-  <BaseCarousel :items="batteryIds">
+  <BaseCarousel :items="batteryIds" :card-width="cardWidth">
     <template #item="{ item }">
-      <BatteryCard :battery-id="item" />
+      <BatteryCard :battery-id="item" @card-width="cardWidth = $event"/>
     </template>
   </BaseCarousel>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BatteryCard from 'src/components/BatteryCard.vue';
 
+const cardWidth = ref<number | undefined>(undefined);
+
 const mqttStore = useMqttStore();
 
 const batteryIds = computed(() => mqttStore.batteryIds);
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 3d7a1b1ae0..233d5163d6 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card class="full-height card-width">
+  <q-card ref="cardRef" class="full-height card-width">
     <q-card-section>
       <div class="row items-center text-h6 text-bold">
         <div class="col flex items-center">
@@ -93,7 +93,7 @@
   />
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import SliderDouble from './SliderDouble.vue';
 import ChargePointLock from './ChargePointLock.vue';
@@ -109,6 +109,11 @@ import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
 import { useQuasar } from 'quasar';
 
+const cardRef = ref<{ $el: HTMLElement } | null>(null);
+const emit = defineEmits<{
+  (event: 'card-width', width: number | undefined): void;
+}>();
+
 const mqttStore = useMqttStore();
 
 const $q = useQuasar();
@@ -278,6 +283,11 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
+
+onMounted(() => {
+  const cardWidth = cardRef.value?.$el.offsetWidth;
+  emit('card-width', cardWidth);
+});
 </script>
 <style lang="scss" scoped>
 .card-width {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 1406afd41e..a8f3bc8d82 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -2,9 +2,10 @@
   <BaseCarousel
     v-if="chargePointIds.length <= cardViewBreakpoint"
     :items="chargePointIds"
+    :card-width="cardWidth"
   >
     <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" />
+      <ChargePointCard :charge-point-id="item" @card-width="cardWidth = $event" />
     </template>
   </BaseCarousel>
 
@@ -145,6 +146,8 @@ import {
   ChargePointRow,
 } from 'src/components/models/table-model';
 
+const cardWidth = ref<number | undefined>(undefined);
+
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 002f4f651d..30cec598cd 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card class="full-height card-width">
+  <q-card ref="cardRef" class="full-height card-width">
     <q-card-section>
       <div class="row items-center text-h6 text-bold">
         <div class="col flex items-center">
@@ -59,13 +59,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
+const cardRef = ref<{ $el: HTMLElement } | null>(null);
+const emit = defineEmits<{
+  (event: 'card-width', width: number | undefined): void;
+}>();
+
 const props = defineProps<{
   vehicleId: number;
 }>();
@@ -97,6 +102,11 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
+
+onMounted(() => {
+  const cardWidth = cardRef.value?.$el.offsetWidth;
+  emit('card-width', cardWidth);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index ff7e8e6743..f819a6f159 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -2,9 +2,10 @@
   <BaseCarousel
     v-if="vehicleIds.length <= cardViewBreakpoint"
     :items="vehicleIds"
+    :card-width="cardWidth"
   >
     <template #item="{ item }">
-      <VehicleCard :vehicle-id="item" />
+      <VehicleCard :vehicle-id="item" @card-width="cardWidth = $event" />
     </template>
   </BaseCarousel>
 
@@ -73,6 +74,8 @@ import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 
+const cardWidth = ref<number | undefined>(undefined);
+
 const mqttStore = useMqttStore();
 const isMobile = computed(() => Platform.is.mobile);
 const modalChargeVehicleCardVisible = ref(false);