From ee3376269dec7648d9b162bff68d4c33310ac2bd Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 09:39:54 +0200
Subject: [PATCH 1/6] fix modal card height

---
 .../source/src/components/BaseCarousel.vue     | 18 +++++++++++++++---
 .../source/src/components/BatteryCard.vue      |  8 ++++++--
 .../src/components/BatteryInformation.vue      |  2 +-
 .../source/src/components/ChargePointCard.vue  |  7 ++++++-
 .../src/components/ChargePointInformation.vue  |  2 +-
 .../source/src/components/VehicleCard.vue      | 17 ++++++++++++++++-
 .../src/components/VehicleInformation.vue      | 11 +++--------
 7 files changed, 48 insertions(+), 17 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 e8dce0cbe8..15659bf6e7 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -34,7 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue';
+import {
+  ref,
+  computed,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
 import { Screen } from 'quasar';
 
 const props = defineProps<{ items: number[] }>();
@@ -69,7 +76,6 @@ function measure() {
   });
 }
 
-
 onMounted(() => {
   measure();
   window.addEventListener('resize', measure);
@@ -83,7 +89,13 @@ watch(() => props.items, measure);
 
 const groupSize = computed(() => {
   if (!itemWidth.value || !carouselWidth.value) return 1;
-  const maxGroup = Math.max(1, Math.floor((carouselWidth.value - (showArrows.value ? carouselPadding.value : 50)) / itemWidth.value));
+  const maxGroup = Math.max(
+    1,
+    Math.floor(
+      (carouselWidth.value - (showArrows.value ? carouselPadding.value : 50)) /
+        itemWidth.value,
+    ),
+  );
   // Spezialfall: Alle passen nebeneinander
   if (
     props.items.length > maxGroup &&
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 ff77d50ddf..e94f44a0ab 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,8 +1,11 @@
 <template>
   <q-card
     ref="cardRef"
-    class="card-width full-height"
-    :class="{ 'battery-sum': props.batteryId === -1 }"
+    class="card-width"
+    :class="{
+      'battery-sum': props.batteryId === -1,
+      'full-height': props.fullHeight,
+    }"
   >
     <q-card-section class="row items-center justify-between">
       <div class="text-h6 text-bold ellipsis" :title="cardTitle">
@@ -80,6 +83,7 @@ const cardRef = ref<{ $el: HTMLElement } | null>(null);
 
 const props = defineProps<{
   batteryId: number;
+  fullHeight?: boolean;
 }>();
 
 const singleBattery = computed(() => {
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 e1d3720f1d..a628a38a6a 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseCarousel :items="batteryIds">
     <template #item="{ item }">
-      <BatteryCard :battery-id="item" />
+      <BatteryCard :battery-id="item" full-height />
     </template>
   </BaseCarousel>
 </template>
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 dc0613f0fb..d5e29d099a 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,9 @@
 <template>
-  <q-card ref="cardRef" class="card-width full-height">
+  <q-card
+    ref="cardRef"
+    class="card-width"
+    :class="{ 'full-height': props.fullHeight }"
+  >
     <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="name">
         {{ name }}
@@ -127,6 +131,7 @@ const $q = useQuasar();
 const props = defineProps<{
   chargePointId: number;
   closeButton?: boolean;
+  fullHeight?: boolean;
 }>();
 
 const vehicleId = computed(() => {
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 991ddacc30..37341c58d0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -4,7 +4,7 @@
     :items="chargePointIds"
   >
     <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" />
+      <ChargePointCard :charge-point-id="item" full-height />
     </template>
   </BaseCarousel>
 
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 97c2f80a72..75f018fa28 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,22 @@
 <template>
-  <q-card ref="cardRef" class="card-width full-height">
+  <q-card
+    ref="cardRef"
+    class="card-width"
+    :class="{ 'full-height': props.fullHeight }"
+  >
     <q-card-section class="row">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
         {{ vehicle?.name }}
       </div>
+      <q-space />
+      <q-btn
+        v-if="props.closeButton"
+        icon="close"
+        flat
+        round
+        dense
+        v-close-popup
+      />
     </q-card-section>
     <q-separator class="q-mt-sm" />
     <q-card-section class="row q-mt-sm">
@@ -57,6 +70,8 @@ const cardRef = ref<{ $el: HTMLElement } | null>(null);
 
 const props = defineProps<{
   vehicleId: number;
+  closeButton?: boolean;
+  fullHeight?: boolean;
 }>();
 
 const mqttStore = useMqttStore();
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 26d3eb0c2c..baf02c01b0 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -4,7 +4,7 @@
     :items="vehicleIds"
   >
     <template #item="{ item }">
-      <VehicleCard :vehicle-id="item" />
+      <VehicleCard :vehicle-id="item" full-height />
     </template>
   </BaseCarousel>
 
@@ -42,13 +42,8 @@
       <VehicleCard
         v-if="selectedVehicleId !== null"
         :vehicle-id="selectedVehicleId"
-      >
-        <template #card-actions>
-          <q-btn color="primary" flat no-caps v-close-popup size="md">
-            Schließen
-          </q-btn>
-        </template>
-      </VehicleCard>
+        closeButton
+      />
     </div>
   </q-dialog>
 </template>

From 97c30bc293dfb81a535279e0ab4893751a7ea892 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 10:41:29 +0200
Subject: [PATCH 2/6] change charge point power data layout on small devices

---
 .../source/src/components/ChargePointPowerData.vue   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
index c2eee22a49..5cb495d239 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -1,15 +1,17 @@
 <template>
   <div
     :class="[
-      'text-no-wrap items-center q-gutter-xs',
+      'text-no-wrap items-center',
       columnDisplayFormat ? 'column' : 'row inline',
     ]"
   >
     <span>{{ power }}</span>
-    <q-badge rounded color="primary" :label="phaseNumber">
-      <q-tooltip>Phasenanzahl</q-tooltip>
-    </q-badge>
-    <span>{{ current }}</span>
+    <div :class="{ 'q-ml-xs': !columnDisplayFormat }">
+      <q-badge rounded color="primary" :label="phaseNumber" class="q-mr-xs">
+        <q-tooltip>Phasenanzahl</q-tooltip>
+      </q-badge>
+      <span>{{ current }}</span>
+    </div>
   </div>
 </template>
 

From 7aed61a84b46484cfe89901d1a7b2ce4e8f8705b Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 12:17:29 +0200
Subject: [PATCH 3/6] fix reactivity of vehicle table size

---
 .../src/components/ChargePointInformation.vue | 20 +++++++++----------
 .../src/components/VehicleInformation.vue     | 12 +++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

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 37341c58d0..9d2bcd76cd 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -12,7 +12,7 @@
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="compactTable ? tableColumnsMobile : columnConfigDesktop"
+    :column-config="compactTable ? tableColumnsCompact : columnConfig"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
@@ -20,7 +20,7 @@
     :row-expandable="compactTable"
     @row-click="onRowClick"
   >
-    <!-- desktop view table body slots -->
+    <!-- full view table body slots -->
     <template #body-cell-plugged="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -54,8 +54,8 @@
         />
       </q-td>
     </template>
-    <!-- mobile view table body slots -->
-    <!-- mobile view charge point name and vehicle name displayed in one field -->
+    <!-- compact view table body slots -->
+    <!-- compact 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 charge point charge mode, plug status and time charging displayed in one field -->
+    <!-- compact 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">
@@ -83,7 +83,7 @@
     <template #row-expand="slotProps">
       <div class="q-pa-xs column q-gutter-y-xs">
         <div
-          v-for="column in expansionColumnsMobile"
+          v-for="column in expansionColumnsCompact"
           :key="column.field"
           class="row items-start"
         >
@@ -191,7 +191,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
   };
 });
 
-const columnConfigDesktop: ColumnConfiguration[] = [
+const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Ladepunkt' },
   { field: 'vehicle', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
@@ -202,7 +202,7 @@ const columnConfigDesktop: ColumnConfiguration[] = [
   { field: 'soc', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: ColumnConfiguration[] = [
+const columnConfigCompact: ColumnConfiguration[] = [
   { field: 'nameAndVehicle', label: 'Ladepunkt' },
   { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center' },
   {
@@ -214,10 +214,10 @@ const columnConfigMobile: ColumnConfiguration[] = [
   { field: 'soc', label: 'Ladestand', align: 'right', expandField: true },
 ];
 
-const tableColumnsMobile = columnConfigMobile.filter(
+const tableColumnsCompact = columnConfigCompact.filter(
   (column) => !column.expandField,
 );
-const expansionColumnsMobile = columnConfigMobile.filter(
+const expansionColumnsCompact = columnConfigCompact.filter(
   (column) => column.expandField,
 );
 
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 baf02c01b0..d0fd3e8000 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -12,9 +12,9 @@
     v-else
     :items="vehicleIds"
     :row-data="tableRowData"
-    :column-config="isMobile ? columnConfigMobile : columnConfigDesktop"
+    :column-config="compactTable ? columnConfigCompact : columnConfig"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '45vh'"
+    :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
     :columns-to-search="['name', 'manufacturer', 'model']"
     :row-expandable="true"
@@ -51,7 +51,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { Platform } from 'quasar';
+import { Screen } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
@@ -61,7 +61,7 @@ import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
-const isMobile = computed(() => Platform.is.mobile);
+const compactTable = computed(() => Screen.lt.md);
 const modalChargeVehicleCardVisible = ref(false);
 const selectedVehicleId = ref<number | null>(null);
 const filter = ref('');
@@ -98,7 +98,7 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
   };
 });
 
-const columnConfigDesktop: ColumnConfiguration[] = [
+const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'manufacturer', label: 'Hersteller' },
   { field: 'model', label: 'Modell' },
@@ -106,7 +106,7 @@ const columnConfigDesktop: ColumnConfiguration[] = [
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: ColumnConfiguration[] = [
+const columnConfigCompact: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },

From bb64ba1b2ff607fe7a3a547a475c6c6db65a4b1f Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 13:11:07 +0200
Subject: [PATCH 4/6] fix table search field position

---
 .../web_themes/koala/source/src/components/BaseTable.vue  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index bc2ec5edd8..8bfe4108f6 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -18,7 +18,7 @@
   >
     <!-- search field ------------------------------------------------------->
     <template #top v-if="searchInputVisible">
-      <div class="row full-width items-center q-mb-sm">
+      <div class="row full-width items-center">
         <div class="col">
           <q-input
             v-model="filterModel"
@@ -211,7 +211,11 @@ const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
 const onRowClick = (evt: Event, row: T) => emit('row-click', row);
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.q-table__top) {
+  padding: #{map-get($space-xs, y)} #{map-get($space-xs, x)};
+}
+
 .search-field {
   width: 100%;
   max-width: 18em;

From c64c7e68b1367761a4028753597cc83e7e3f3059 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 13:11:44 +0200
Subject: [PATCH 5/6] dense table on compact view

---
 .../web_themes/koala/source/src/components/BaseTable.vue        | 2 ++
 .../koala/source/src/components/ChargePointInformation.vue      | 1 +
 .../koala/source/src/components/VehicleInformation.vue          | 1 +
 3 files changed, 4 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 8bfe4108f6..9bbc190a2c 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -15,6 +15,7 @@
     binary-state-sort
     :pagination="{ rowsPerPage: 0 }"
     hide-bottom
+    :dense="props.dense"
   >
     <!-- search field ------------------------------------------------------->
     <template #top v-if="searchInputVisible">
@@ -146,6 +147,7 @@ const props = defineProps<{
   filter?: string;
   columnsToSearch?: string[];
   rowExpandable?: boolean;
+  dense?: boolean;
 }>();
 
 /* ------------------------------------------------------------------ state */
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 9d2bcd76cd..fbf8fc94ae 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -13,6 +13,7 @@
     :items="chargePointIds"
     :row-data="tableRowData"
     :column-config="compactTable ? tableColumnsCompact : columnConfig"
+    :dense="compactTable"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
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 d0fd3e8000..aca31c2df7 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -13,6 +13,7 @@
     :items="vehicleIds"
     :row-data="tableRowData"
     :column-config="compactTable ? columnConfigCompact : columnConfig"
+    :dense="compactTable"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"

From 750968b9349b447d7be3d078b6f50f54310dd29f Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 1 Sep 2025 13:15:06 +0200
Subject: [PATCH 6/6] remove table border radius in compact mode

---
 .../web_themes/koala/source/src/components/BaseTable.vue        | 2 ++
 .../koala/source/src/components/ChargePointInformation.vue      | 1 +
 .../koala/source/src/components/VehicleInformation.vue          | 1 +
 3 files changed, 4 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 9bbc190a2c..e08601d7c9 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -16,6 +16,7 @@
     :pagination="{ rowsPerPage: 0 }"
     hide-bottom
     :dense="props.dense"
+    :square="props.square"
   >
     <!-- search field ------------------------------------------------------->
     <template #top v-if="searchInputVisible">
@@ -148,6 +149,7 @@ const props = defineProps<{
   columnsToSearch?: string[];
   rowExpandable?: boolean;
   dense?: boolean;
+  square?: boolean;
 }>();
 
 /* ------------------------------------------------------------------ state */
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 fbf8fc94ae..6c03688eaa 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -14,6 +14,7 @@
     :row-data="tableRowData"
     :column-config="compactTable ? tableColumnsCompact : columnConfig"
     :dense="compactTable"
+    :square="compactTable"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
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 aca31c2df7..dc1c85ee87 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -14,6 +14,7 @@
     :row-data="tableRowData"
     :column-config="compactTable ? columnConfigCompact : columnConfig"
     :dense="compactTable"
+    :square="compactTable"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"