From 0bada3c81baaeaa39674d6dca28fa5babf80537e Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 08:21:20 +0200
Subject: [PATCH 1/7] cleanup card group size calculation

---
 .../source/src/components/BaseCarousel.vue    | 143 +++++-------------
 .../source/src/components/ChargePointCard.vue |   9 +-
 .../source/src/components/VehicleCard.vue     |   9 +-
 .../koala/source/src/pages/IndexPage.vue      |   4 +
 4 files changed, 43 insertions(+), 122 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 f878c9a988..c4122bad8b 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -22,10 +22,10 @@
       class="row no-wrap justify-center carousel-slide"
     >
       <div
-        v-for="item in group"
+        v-for="(item, idx) in group"
         :key="item"
         class="item-container"
-        :style="`min-height: ${maxCardHeight}px`"
+        :ref="idx === 0 && index === 0 ? 'itemRef' : undefined"
       >
         <slot name="item" :item="item"></slot>
       </div>
@@ -34,15 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  onMounted,
-  onBeforeUnmount,
-  provide,
-} from 'vue';
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 
 const props = defineProps<{
@@ -53,81 +45,34 @@ 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);
-};
-
-// 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 itemRef = ref<(HTMLElement | null)[]>([]);
+const groupSize = ref<number>(2);
+
+const updateGroupSize = () => {
+  if (!itemRef.value[0]) {
+    groupSize.value = 1; // Fallback to 1 if no items are available
+    setTimeout(updateGroupSize, 50);
+    return;
   }
-});
-
-const effectiveCardWidth = ref<number | undefined>(undefined);
-
-// Function provided to child components
-const setCardWidth = (width: number | undefined) => {
-  effectiveCardWidth.value = width ? width + 72 : undefined; // Add 72px to account for padding / margins / navigation buttons in carousel
+  const carouselSlideWidth =
+    carouselRef.value?.$el.querySelector('.q-carousel__slide')?.clientWidth ??
+    0;
+  const itemWidth = itemRef.value[0]?.clientWidth ?? 300; // Fallback
+  // Get computed padding from the carousel slide element
+  let padding = 0;
+  const slideEl = carouselRef.value?.$el.querySelector('.q-carousel__slide');
+  if (slideEl) {
+    const style = window.getComputedStyle(slideEl);
+    padding =
+      parseFloat(style.paddingLeft || '0') +
+      parseFloat(style.paddingRight || '0');
+  }
+  groupSize.value = Math.max(
+    1,
+    Math.floor((carouselSlideWidth - padding) / itemWidth),
+  );
 };
 
-provide('setCardWidth', setCardWidth);
-
-// 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(() => {
   return props.items.reduce((resultArray, item, index) => {
     const chunkIndex = Math.floor(index / groupSize.value);
@@ -139,35 +84,21 @@ const groupedItems = computed(() => {
   }, [] as number[][]);
 });
 
-// Updates the current slide and recalculates card heights when the grouped items change
+onMounted(async () => {
+  await nextTick(() => {
+    updateGroupSize();
+    window.addEventListener('resize', updateGroupSize);
+  });
+});
+
 watch(
-  () => groupedItems.value,
-  async (newValue, oldValue) => {
-    const findSlide = (itemId: number) => {
-      return newValue.findIndex((group) => group.includes(itemId));
-    };
-    if (!oldValue || oldValue.length === 0) {
-      currentSlide.value = 0;
-      return;
-    }
-    animated.value = false;
-    currentSlide.value = Math.max(
-      findSlide(oldValue[currentSlide.value][0]),
-      0,
-    );
-    await nextTick();
-    animated.value = true;
-    updateMaxCardHeight();
-    observeCardChanges();
-  },
+  () => props.items,
+  () => updateGroupSize(),
 );
 
-// Called when the slide changes; recalculates card heights and scrolls to the previous position
 const handleSlideChange = () => {
   const currentScroll = window.scrollY;
   nextTick(() => {
-    updateMaxCardHeight();
-    observeCardChanges();
     window.scrollTo(0, currentScroll);
   });
 };
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 66c260ca9a..42f128a07e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -86,7 +86,7 @@
   />
 </template>
 <script setup lang="ts">
-import { computed, ref, onMounted, inject } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import SliderDouble from './SliderDouble.vue';
 import ChargePointLock from './ChargePointLock.vue';
@@ -103,8 +103,6 @@ import ChargePointPowerData from './ChargePointPowerData.vue';
 import { useQuasar } from 'quasar';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
-const setCardWidth =
-  inject<(width: number | undefined) => void>('setCardWidth');
 
 const mqttStore = useMqttStore();
 
@@ -279,11 +277,6 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
-
-onMounted(() => {
-  const cardWidth = cardRef.value?.$el.offsetWidth;
-  setCardWidth?.(cardWidth);
-});
 </script>
 <style lang="scss" scoped>
 .card-width {
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 ed8ad64c22..e5f4431361 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, inject } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
@@ -51,8 +51,6 @@ import ManualSocDialog from './ManualSocDialog.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
-const setCardWidth =
-  inject<(width: number | undefined) => void>('setCardWidth');
 
 const props = defineProps<{
   vehicleId: number;
@@ -88,11 +86,6 @@ const refreshSoc = () => {
     message: 'SoC Update angefordert.',
   });
 };
-
-onMounted(() => {
-  const cardWidth = cardRef.value?.$el.offsetWidth;
-  setCardWidth?.(cardWidth);
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index 83c63f2ce6..8eccb89bd5 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -69,4 +69,8 @@ const batteryConfigured = computed(() => {
 .chart-section {
   height: 40vh;
 }
+
+.tab-section :deep(.q-tab-panel) {
+  max-width: 100vw;
+}
 </style>

From a806261d964361e57f5e71a26a155d1d01413bff Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 08:22:41 +0200
Subject: [PATCH 2/7] minor code cleanup

---
 .../source/src/components/ChargePointCard.vue | 21 ++++++++++---------
 .../components/ChargePointVehicleSelect.vue   |  3 ---
 .../source/src/components/VehicleCard.vue     | 12 +++++------
 .../koala/source/src/pages/IndexPage.vue      |  8 +++----
 4 files changed, 20 insertions(+), 24 deletions(-)

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 42f128a07e..fb90013ed0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -73,17 +73,18 @@
       />
       <slot name="card-footer"></slot>
     </q-card-section>
+    <!-- //////////////////////  modal settings dialog   //////////////////// -->
+    <ChargePointSettings
+      :chargePointId="props.chargePointId"
+      v-model="settingsVisible"
+    />
+    <!-- //////////////////////  modal soc dialog   //////////////////// -->
+    <ManualSocDialog
+      :vehicleId="vehicleId"
+      :chargePointId="props.chargePointId"
+      v-model:socDialogVisible="socInputVisible"
+    />
   </q-card>
-  <!-- //////////////////////  Settings popup dialog   //////////////////// -->
-  <ChargePointSettings
-    :chargePointId="props.chargePointId"
-    v-model="settingsVisible"
-  />
-  <ManualSocDialog
-    :vehicleId="vehicleId"
-    :chargePointId="props.chargePointId"
-    v-model:socDialogVisible="socInputVisible"
-  />
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
index d3e165922c..15ad9514c4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
@@ -52,6 +52,3 @@ const connectedVehicle = mqttStore.chargePointConnectedVehicleInfo(
 
 const vehicles = computed(() => mqttStore.vehicleList);
 </script>
-
-<style scoped>
-</style>
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 e5f4431361..e1ec781e8d 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -32,14 +32,12 @@
       />
       <slot name="card-footer"></slot>
     </q-card-section>
+    <!-- //////////////////////  modal soc dialog  //////////////////// -->
+    <ManualSocDialog
+      :vehicleId="props.vehicleId"
+      v-model:socDialogVisible="socInputVisible"
+    />
   </q-card>
-
-  <!-- //////////////////////  input dialog Manual SoC   //////////////////// -->
-
-  <ManualSocDialog
-    :vehicleId="props.vehicleId"
-    v-model:socDialogVisible="socInputVisible"
-  />
 </template>
 
 <script setup lang="ts">
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index 8eccb89bd5..fff1191a11 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -18,8 +18,8 @@
           <q-icon name="battery_full" size="md" color="primary" />
         </q-tab>
         <!-- <q-tab name="smart-home" title="SmartHome">
-        <q-icon name="home" size="md" color="primary" />
-      </q-tab> -->
+          <q-icon name="home" size="md" color="primary" />
+        </q-tab> -->
       </q-tabs>
       <!-- Tab Panels -->
       <q-tab-panels v-model="tab" class="col">
@@ -37,8 +37,8 @@
         </q-tab-panel>
         <!-- Smart Home -->
         <!-- <q-tab-panel name="smart-home" class="">
-        <SmartHomeInformation />
-      </q-tab-panel> -->
+          <SmartHomeInformation />
+        </q-tab-panel> -->
       </q-tab-panels>
     </div>
   </q-page>

From 4655ed2566dac22dff386cc7a44cbd1de9043a76 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 11:32:34 +0200
Subject: [PATCH 3/7] remove missed card width calculation in BatteryCard

---
 .../koala/source/src/components/BatteryCard.vue       | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

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 ccc9c6b756..e2874e71b0 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -74,17 +74,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, inject } from 'vue';
+import { computed, ref } 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 setCardWidth = inject<((width: number | undefined) => void) | undefined>(
-  'setCardWidth',
-  undefined,
-);
 
 const props = defineProps<{
   batteryId: number;
@@ -153,11 +149,6 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
-
-onMounted(() => {
-  const cardWidth = cardRef.value?.$el.clientWidth;
-  setCardWidth?.(cardWidth);
-});
 </script>
 
 <style scoped>

From b49f99b89ddf369fd4329b331ff15f3dd73c3fb6 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 11:33:09 +0200
Subject: [PATCH 4/7] unify charge point message components

---
 .../components/ChargePointFaultMessage.vue    | 51 --------------
 .../src/components/ChargePointMessage.vue     | 69 +++++++++++++++++++
 .../components/ChargePointStateMessage.vue    | 32 ---------
 3 files changed, 69 insertions(+), 83 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointFaultMessage.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultMessage.vue
deleted file mode 100644
index d5ead98f91..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultMessage.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div
-    v-if="state !== undefined && state !== 0"
-    class="row q-mt-sm q-pa-sm text-white no-wrap"
-    :class="messageClass"
-    style="border-radius: 10px"
-  >
-    <q-icon :name="iconName" size="sm" class="q-mr-xs" />
-    {{ message }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed } from 'vue';
-
-const props = defineProps<{
-  chargePointId: number;
-}>();
-
-const mqttStore = useMqttStore();
-
-const state = computed(() =>
-  mqttStore.chargePointFaultState(props.chargePointId),
-);
-const message = computed(() =>
-  mqttStore.chargePointFaultMessage(props.chargePointId),
-);
-
-const messageClass = computed(() => {
-  switch (state.value) {
-    case 1:
-      return 'bg-warning';
-    case 2:
-      return 'bg-negative';
-    default:
-      return 'bg-primary';
-  }
-});
-
-const iconName = computed(() => {
-  switch (state.value) {
-    case 1:
-      return 'warning';
-    case 2:
-      return 'error';
-    default:
-      return 'info';
-  }
-});
-</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
new file mode 100644
index 0000000000..72be99e908
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
@@ -0,0 +1,69 @@
+<template>
+  <div
+    v-if="showMessage"
+    class="row q-mt-sm q-pa-sm text-white no-wrap cursor-pointer"
+    :class="[{ 'items-center': collapsed }, messageClass]"
+    style="border-radius: 10px"
+    @click="toggleCollapse"
+  >
+    <q-icon :name="iconName" size="sm" class="q-mr-xs" />
+    <div :class="{ ellipsis: collapsed }">
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+  chargePointId: number
+  faultMessage?: boolean
+}>();
+
+const mqttStore = useMqttStore();
+const collapsed = ref<boolean>(true);
+
+const toggleCollapse = () => {
+  collapsed.value = !collapsed.value;
+};
+
+const showMessage = computed(() => {
+  return state.value !== undefined && state.value !== 0;
+});
+
+const state = computed(() =>
+  props.faultMessage
+    ? mqttStore.chargePointFaultState(props.chargePointId)
+    : -1
+);
+
+const message = computed(() =>
+  props.faultMessage
+    ? mqttStore.chargePointFaultMessage(props.chargePointId)
+    : mqttStore.chargePointStateMessage(props.chargePointId),
+);
+
+const messageClass = computed(() => {
+  switch (state.value) {
+    case 1:
+      return 'bg-warning';
+    case 2:
+      return 'bg-negative';
+    default:
+      return 'bg-primary';
+  }
+});
+
+const iconName = computed(() => {
+  switch (state.value) {
+    case 1:
+      return 'warning';
+    case 2:
+      return 'error';
+    default:
+      return 'info';
+  }
+});
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
deleted file mode 100644
index e76583c532..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap message-text"
-    color="primary"
-    style="border-radius: 10px"
-  >
-    <q-icon name="info" size="sm" class="q-mr-xs" />
-    {{ message }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed } from 'vue';
-
-const props = defineProps<{
-  chargePointId: number;
-}>();
-
-const mqttStore = useMqttStore();
-
-const message = computed(() =>
-  mqttStore.chargePointStateMessage(props.chargePointId),
-);
-</script>
-
-<style scoped>
-.message-text {
-  overflow-x: auto;
-  overflow-y: auto;
-}
-</style>

From 5ae59dd8c8d69e02997355fb4d39def62fbeb57e Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 11:53:28 +0200
Subject: [PATCH 5/7] compact vehicle connection state

---
 .../components/VehicleConnectionStateIcon.vue | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
index 7bf15162cf..7808c01d94 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -1,38 +1,37 @@
 <template>
-  <div class="col">
-    <div class="text-subtitle2">Status:</div>
+  <div class="row items-center">
+    <div class="text-subtitle2 q-mr-sm">Status:</div>
     <q-chip
       v-if="vehicleState.length < 1"
       label="Nicht zugeordnet"
       color="primary"
+      class="q-ml-auto"
     >
     </q-chip>
-    <div class="row wrap">
-      <q-chip
-        v-for="(chargePoint, index) in vehicleState"
-        :key="index"
-        :icon="chargePoint.plugged ? 'power' : 'power_off'"
-        class="ellipsis"
-        :color="
+    <q-chip
+      v-for="(chargePoint, index) in vehicleState"
+      :key="index"
+      :icon="chargePoint.plugged ? 'power' : 'power_off'"
+      :class="[{'q-ml-auto': index === 0, 'q-ml-none': index !== 0}, 'ellipsis']"
+      :color="
+        chargePoint.plugged
+          ? chargePoint.charging
+            ? 'positive'
+            : 'warning'
+          : 'negative'
+      "
+      :label="chargePoint.name"
+    >
+      <q-tooltip>
+        {{
           chargePoint.plugged
             ? chargePoint.charging
-              ? 'positive'
-              : 'warning'
-            : 'negative'
-        "
-        :label="chargePoint.name"
-      >
-        <q-tooltip>
-          {{
-            chargePoint.plugged
-              ? chargePoint.charging
-                ? 'Lädt'
-                : 'Angesteckt, lädt nicht'
-              : 'Nicht angesteckt'
-          }}
-        </q-tooltip>
-      </q-chip>
-    </div>
+              ? 'Lädt'
+              : 'Angesteckt, lädt nicht'
+            : 'Nicht angesteckt'
+        }}
+      </q-tooltip>
+    </q-chip>
   </div>
 </template>
 

From 3f965ad98b95232e8b425ba5be5c28e958c7ab10 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 12:21:45 +0200
Subject: [PATCH 6/7] unify cards

---
 .../source/src/components/BatteryCard.vue     | 54 +++++++++----------
 .../src/components/BatterySettingsDialog.vue  | 20 ++++---
 .../source/src/components/ChargePointCard.vue | 19 ++++---
 .../src/components/ChargePointInformation.vue | 44 ++++-----------
 .../src/components/ChargePointSettings.vue    | 25 ++++-----
 ...ue => ChargePointTimeChargingSettings.vue} |  0
 .../source/src/components/SliderDouble.vue    |  4 +-
 .../source/src/components/VehicleCard.vue     | 39 ++++++++------
 .../src/components/VehicleInformation.vue     | 40 ++++----------
 9 files changed, 108 insertions(+), 137 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{ChargePointTimeChargingPlans.vue => ChargePointTimeChargingSettings.vue} (100%)

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 e2874e71b0..4f241e8180 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -4,22 +4,19 @@
     class="full-height card-width"
     :class="{ 'battery-sum': props.batteryId === -1 }"
   >
-    <q-card-section
-      class="text-h6 items-center text-bold justify-between ellipsis"
-      :title="cardTitle"
-    >
-      {{ cardTitle }}
-    </q-card-section>
-    <q-separator inset />
-    <q-card-section class="row flex justify-end">
+    <q-card-section class="row items-center justify-between">
+      <div class="text-h6 text-bold  ellipsis" :title="cardTitle">
+        {{ cardTitle }}
+      </div>
       <q-icon
-        class="cursor-pointer q-mt-sm"
+        class="cursor-pointer q-ml-auto"
         v-if="showSettings"
         name="settings"
         size="sm"
         @click="dialog?.open()"
       />
     </q-card-section>
+    <q-separator class="q-mt-sm" />
     <q-card-section
       class="row q-mt-sm text-subtitle2 justify-between full-width"
     >
@@ -28,23 +25,27 @@
         {{ power }}
       </div>
     </q-card-section>
-    <q-separator v-if="showSettings" inset class="q-mt-sm" />
-    <q-card-section
-      v-if="showSettings"
-      class="row q-mt-md justify-between text-subtitle2"
-    >
-      <div>Laden mit Überschuss:</div>
-      <div class="q-ml-sm row items-center">
-        <q-icon
-          :name="batteryMode.icon"
-          size="sm"
-          class="q-mr-sm"
-          color="primary"
-        />
-        {{ batteryMode.label }}
-      </div>
-    </q-card-section>
-    <q-separator inset class="q-mt-sm" />
+    <div v-if="showSettings">
+      <q-separator inset class="q-mt-sm" />
+      <q-card-section
+        v-if="showSettings"
+        class="row q-mt-md justify-between text-subtitle2"
+      >
+        <div>Laden mit Überschuss:</div>
+        <div class="q-ml-sm row items-center">
+          <q-icon
+            :name="batteryMode.icon"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          <div>
+            {{ batteryMode.label }}
+          </div>
+        </div>
+      </q-card-section>
+    </div>
+    <q-separator inset />
     <q-card-section>
       <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
       <div class="row q-mt-sm text-subtitle2 justify-between full-width">
@@ -63,7 +64,6 @@
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
       <SliderDouble
-        class="q-mt-sm"
         :current-value="soc"
         :readonly="true"
         limit-mode="none"
diff --git a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
index 77fabb3c96..0e1dbe62c6 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -4,10 +4,16 @@
     :maximized="$q.screen.width < 385"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
-    <q-card style="min-width: 24em">
+    <q-card>
       <q-card-section>
-        <div class="text-h6">{{ cardTitle }}</div>
-        <div class="text-subtitle2 q-mt-sm">Laden mit Überschuss Modus:</div>
+        <div class="row">
+          <div class="text-h6 q-pr-sm">Einstellungen:</div>
+          <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section>
+        <div class="text-subtitle2">Laden mit Überschuss Modus:</div>
         <BatteryModeButtons />
       </q-card-section>
       <q-card-actions align="right">
@@ -32,11 +38,11 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-const cardTitle = computed(() => {
-  if (props.batteryId === undefined) {
-    return 'Übergreifende Einstellungen';
+const name = computed(() => {
+  if (props.batteryId === undefined || props.batteryId === -1) {
+    return 'Übergreifend';
   }
-  return `Einstellungen ${mqttStore.batteryName(props.batteryId)}`;
+  return mqttStore.batteryName(props.batteryId);
 });
 
 defineExpose({
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 fb90013ed0..bf4963cf5d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,9 +1,11 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="text-h6 text-bold ellipsis" :title="name">
-      {{ name }}
+    <q-card-section class="row">
+      <div class="text-h6 text-bold ellipsis" :title="name">
+        {{ name }}
+      </div>
     </q-card-section>
-    <q-separator inset />
+    <q-separator class="q-mt-sm" />
     <q-card-section class="row flex items-center justify-between">
       <div>
         <ChargePointStateIcon :charge-point-id="Number(props.chargePointId)" />
@@ -23,8 +25,8 @@
       />
     </q-card-section>
     <q-card-section>
-      <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
-      <ChargePointStateMessage :charge-point-id="props.chargePointId" />
+      <ChargePointMessage fault-message :charge-point-id="props.chargePointId" />
+      <ChargePointMessage :charge-point-id="props.chargePointId" />
     </q-card-section>
     <q-card-section
       class="full-width row no-wrap justify-between content-start items-center q-mt-sm"
@@ -71,8 +73,10 @@
         :on-edit-soc="openSocDialog"
         :on-refresh-soc="refreshSoc"
       />
-      <slot name="card-footer"></slot>
     </q-card-section>
+    <q-card-actions v-if="$slots['card-actions']" align="right">
+      <slot name="card-actions"></slot>
+    </q-card-actions>
     <!-- //////////////////////  modal settings dialog   //////////////////// -->
     <ChargePointSettings
       :chargePointId="props.chargePointId"
@@ -94,8 +98,7 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointStateIcon from './ChargePointStateIcon.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
-import ChargePointStateMessage from './ChargePointStateMessage.vue';
-import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
+import ChargePointMessage from './ChargePointMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
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..9bff447aa8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -55,7 +55,7 @@
       </q-td>
     </template>
     <!-- mobile view table body slots -->
-    <!-- mobile view chargepoint name and vehicle name displayed in one field -->
+    <!-- mobile view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         {{ slotProps.row.name }}<br />
@@ -63,7 +63,7 @@
       </q-td>
     </template>
 
-    <!-- mobile view chargepoint chargemode, plug status and time charging displayed in one field -->
+    <!-- mobile view charge point charge mode, plug status and time charging displayed in one field -->
     <template #body-cell-modePluggedTimeCharging="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <div class="items-center">
@@ -110,18 +110,15 @@
         v-if="selectedChargePointId !== null"
         :charge-point-id="selectedChargePointId"
       >
-        <template #card-footer>
-          <div class="card-footer">
-            <q-btn
-              color="primary"
-              flat
-              no-caps
-              v-close-popup
-              class="close-button"
-              size="md"
-              >Schließen</q-btn
-            >
-          </div>
+        <template #card-actions>
+          <q-btn
+            color="primary"
+            flat
+            no-caps
+            v-close-popup
+            size="md"
+            >Schließen</q-btn
+          >
         </template>
       </ChargePointCard>
     </div>
@@ -237,22 +234,3 @@ const onRowClick = (row: ChargePointRow) => {
   modalChargePointCardVisible.value = true;
 };
 </script>
-
-<style scoped>
-.dialog-content {
-  width: auto;
-  max-width: 24em;
-}
-
-.close-button {
-  position: absolute;
-  bottom: 0.4em;
-  right: 0.4em;
-  z-index: 1;
-  background: transparent;
-}
-
-.card-footer {
-  height: 1.9em;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
index 67d7e7fa04..6b4b23a89e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -7,24 +7,26 @@
     <q-card>
       <q-card-section>
         <div class="row">
-          <div class="text-h6">Einstellungen {{ name }}</div>
-          <q-space />
+          <div class="text-h6 q-pr-sm">Einstellungen:</div>
+          <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
         </div>
       </q-card-section>
-      <q-card-section class="q-py-none">
+      <q-separator />
+      <q-card-section>
         <div class="row items-center justify-between">
           <div class="text-subtitle2">Ladepunkt sperren</div>
           <ChargePointLock :charge-point-id="props.chargePointId" dense />
         </div>
         <q-separator class="q-mt-sm" />
         <div class="row items-center q-mt-sm">
-          <div>
-            <div class="text-subtitle2 q-mr-sm">Fahrzeug</div>
+          <div class="col-auto text-subtitle2 q-mr-sm">Fahrzeug</div>
+          <div class="col">
+            <ChargePointVehicleSelect
+              class="full-width"
+              :charge-point-id="props.chargePointId"
+              :readonly="false"
+            />
           </div>
-          <ChargePointVehicleSelect
-            :charge-point-id="props.chargePointId"
-            :readonly="false"
-          />
         </div>
         <div class="row items-center justify-between q-mt-sm">
           <div class="text-subtitle2">Priorität</div>
@@ -59,7 +61,7 @@
         <!-- /////////////////  time charging settings /////////////////// -->
         <div v-if="chargeMode.value !== 'stop'">
           <q-separator class="q-my-sm" />
-          <ChargePointTimeChargingPlans
+          <ChargePointTimeChargingSettings
             :charge-point-id="props.chargePointId"
           />
         </div>
@@ -79,12 +81,11 @@ import ChargePointInstantSettings from './ChargePointInstantSettings.vue';
 import ChargePointPvSettings from './ChargePointPvSettings.vue';
 import ChargePointEcoSettings from './ChargePointEcoSettings.vue';
 import ChargePointScheduledSettings from './ChargePointScheduledSettings.vue';
+import ChargePointTimeChargingSettings from './ChargePointTimeChargingSettings.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
-// import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointLock from './ChargePointLock.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
-import ChargePointTimeChargingPlans from './ChargePointTimeChargingPlans.vue';
 
 const $q = useQuasar();
 const mqttStore = useMqttStore();
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue
rename to packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 6b79d14251..22164a3e10 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -48,7 +48,7 @@
             class="q-ml-xs cursor-pointer"
             @click="onEditSoc"
           >
-            <q-tooltip>SoC eingeben</q-tooltip>
+            <q-tooltip>Ladestand eingeben</q-tooltip>
           </q-icon>
           <q-icon
             v-else-if="vehicleSocType !== undefined && limitMode !== 'amount'"
@@ -57,7 +57,7 @@
             class="q-ml-xs cursor-pointer"
             @click="onRefreshSoc"
           >
-            <q-tooltip>SoC aktualisieren</q-tooltip>
+            <q-tooltip>Ladestand aktualisieren</q-tooltip>
           </q-icon>
         </div>
       </div>
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 e1ec781e8d..c266bac2ea 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -1,9 +1,11 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="text-h6 text-bold ellipsis" :title="vehicle?.name">
-      {{ vehicle?.name }}
+    <q-card-section class="row">
+      <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
+        {{ vehicle?.name }}
+      </div>
     </q-card-section>
-    <q-separator inset />
+    <q-separator class="q-mt-sm" />
     <q-card-section class="row q-mt-sm">
       <div class="col">
         <div class="text-subtitle2">Hersteller:</div>
@@ -18,20 +20,23 @@
     <q-card-section>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
     </q-card-section>
-    <q-separator inset class="q-mt-sm" />
-    <q-card-section>
-      <SliderDouble
-        v-if="vehicleSocType"
-        class="q-mt-sm"
-        :current-value="vehicleSocValue"
-        :readonly="true"
-        :limit-mode="'none'"
-        :vehicle-soc-type="vehicleSocType"
-        :on-edit-soc="openSocDialog"
-        :on-refresh-soc="refreshSoc"
-      />
-      <slot name="card-footer"></slot>
-    </q-card-section>
+    <div v-if="vehicleSocType">
+      <q-separator inset class="q-mt-sm" />
+      <q-card-section>
+        <SliderDouble
+          v-if="vehicleSocType"
+          :current-value="vehicleSocValue"
+          :readonly="true"
+          :limit-mode="'none'"
+          :vehicle-soc-type="vehicleSocType"
+          :on-edit-soc="openSocDialog"
+          :on-refresh-soc="refreshSoc"
+        />
+      </q-card-section>
+    </div>
+    <q-card-actions v-if="$slots['card-actions']" align="right">
+      <slot name="card-actions"></slot>
+    </q-card-actions>
     <!-- //////////////////////  modal soc dialog  //////////////////// -->
     <ManualSocDialog
       :vehicleId="props.vehicleId"
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..d3ee724865 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -43,18 +43,15 @@
         v-if="selectedVehicleId !== null"
         :vehicle-id="selectedVehicleId"
       >
-        <template #card-footer>
-          <div class="card-footer">
-            <q-btn
-              color="primary"
-              flat
-              no-caps
-              v-close-popup
-              class="close-button"
-              size="md"
-              >Schließen</q-btn
-            >
-          </div>
+        <template #card-actions>
+          <q-btn
+            color="primary"
+            flat
+            no-caps
+            v-close-popup
+            size="md"
+            >Schließen</q-btn
+          >
         </template>
       </VehicleCard>
     </div>
@@ -130,22 +127,3 @@ const onRowClick = (row: VehicleRow) => {
   modalChargeVehicleCardVisible.value = true;
 };
 </script>
-
-<style scoped>
-.dialog-content {
-  width: auto;
-  max-width: 24em;
-}
-
-.close-button {
-  position: absolute;
-  bottom: 0.4em;
-  right: 0.4em;
-  z-index: 1;
-  background: transparent;
-}
-
-.card-footer {
-  height: 1.9em;
-}
-</style>

From 5bed932782735d6df7ed730e519e2d61fa65d86d Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 14 Aug 2025 12:33:58 +0200
Subject: [PATCH 7/7] formatting

---
 .../koala/source/src/components/BatteryCard.vue       |  8 ++------
 .../koala/source/src/components/ChargePointCard.vue   |  5 ++++-
 .../source/src/components/ChargePointInformation.vue  | 11 +++--------
 .../source/src/components/ChargePointMessage.vue      |  6 +++---
 .../src/components/VehicleConnectionStateIcon.vue     |  3 ++-
 .../source/src/components/VehicleInformation.vue      | 11 +++--------
 6 files changed, 17 insertions(+), 27 deletions(-)

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 4f241e8180..4fb16fa849 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -5,7 +5,7 @@
     :class="{ 'battery-sum': props.batteryId === -1 }"
   >
     <q-card-section class="row items-center justify-between">
-      <div class="text-h6 text-bold  ellipsis" :title="cardTitle">
+      <div class="text-h6 text-bold ellipsis" :title="cardTitle">
         {{ cardTitle }}
       </div>
       <q-icon
@@ -63,11 +63,7 @@
     </q-card-section>
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
-      <SliderDouble
-        :current-value="soc"
-        :readonly="true"
-        limit-mode="none"
-      />
+      <SliderDouble :current-value="soc" :readonly="true" limit-mode="none" />
     </q-card-section>
   </q-card>
   <BatterySettingsDialog :battery-id="props.batteryId" ref="dialog" />
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 bf4963cf5d..c90e223ceb 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -25,7 +25,10 @@
       />
     </q-card-section>
     <q-card-section>
-      <ChargePointMessage fault-message :charge-point-id="props.chargePointId" />
+      <ChargePointMessage
+        fault-message
+        :charge-point-id="props.chargePointId"
+      />
       <ChargePointMessage :charge-point-id="props.chargePointId" />
     </q-card-section>
     <q-card-section
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 9bff447aa8..211402add5 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -111,14 +111,9 @@
         :charge-point-id="selectedChargePointId"
       >
         <template #card-actions>
-          <q-btn
-            color="primary"
-            flat
-            no-caps
-            v-close-popup
-            size="md"
-            >Schließen</q-btn
-          >
+          <q-btn color="primary" flat no-caps v-close-popup size="md">
+            Schließen
+          </q-btn>
         </template>
       </ChargePointCard>
     </div>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
index 72be99e908..7444cd7e43 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointMessage.vue
@@ -18,8 +18,8 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed, ref } from 'vue';
 
 const props = defineProps<{
-  chargePointId: number
-  faultMessage?: boolean
+  chargePointId: number;
+  faultMessage?: boolean;
 }>();
 
 const mqttStore = useMqttStore();
@@ -36,7 +36,7 @@ const showMessage = computed(() => {
 const state = computed(() =>
   props.faultMessage
     ? mqttStore.chargePointFaultState(props.chargePointId)
-    : -1
+    : -1,
 );
 
 const message = computed(() =>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
index 7808c01d94..4d64448dc0 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -12,7 +12,8 @@
       v-for="(chargePoint, index) in vehicleState"
       :key="index"
       :icon="chargePoint.plugged ? 'power' : 'power_off'"
-      :class="[{'q-ml-auto': index === 0, 'q-ml-none': index !== 0}, 'ellipsis']"
+      class="ellipsis"
+      :class="[{ 'q-ml-auto': index === 0, 'q-ml-none': index !== 0 }]"
       :color="
         chargePoint.plugged
           ? chargePoint.charging
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 d3ee724865..26d3eb0c2c 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -44,14 +44,9 @@
         :vehicle-id="selectedVehicleId"
       >
         <template #card-actions>
-          <q-btn
-            color="primary"
-            flat
-            no-caps
-            v-close-popup
-            size="md"
-            >Schließen</q-btn
-          >
+          <q-btn color="primary" flat no-caps v-close-popup size="md">
+            Schließen
+          </q-btn>
         </template>
       </VehicleCard>
     </div>