From b0f20e397063995cd4ffb41305d7f43bcdad539f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 6 Jul 2026 16:39:29 +0200
Subject: [PATCH] Consumer cards in carousel - small screen mobile view

---
 .../koala/source/src/components/ConsumerCard.vue   |  3 ++-
 .../source/src/components/ConsumerInformation.vue  | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index 5d0b9e50d7..2276377097 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -148,7 +148,8 @@ const onOff = computed({
 
 <style scoped lang="scss">
 .card-width {
-  width: 100%;
+  width: 22em;
+  max-width: 100%;
   border: none;
   border-left: 4px solid var(--q-consumer);
   border-radius: 15px;
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
index 951e4e31d6..ef3307562f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerInformation.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="consumer-grid-wrapper">
+  <BaseCarousel v-if="smallScreen" :items="consumerIds">
+    <template #item="{ item }">
+      <ConsumerCard :consumer-id="item" full-height />
+    </template>
+  </BaseCarousel>
+
+  <div v-else class="consumer-grid-wrapper">
     <div class="consumer-grid">
       <ConsumerCard
         v-for="item in consumerIds"
@@ -13,13 +19,19 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useQuasar } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
+import BaseCarousel from 'src/components/BaseCarousel.vue';
 import ConsumerCard from 'src/components/ConsumerCard.vue';
 
+const $q = useQuasar();
+
 const mqttStore = useMqttStore();
 
 const consumerIds = computed(() => mqttStore.consumerIds);
+
+const smallScreen = computed(() => $q.screen.width < 700);
 </script>
 
 <style scoped lang="scss">