From 219ef8a01996a2a5ae5746ee9064817d532f50a1 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 25 Aug 2025 11:27:24 +0200
Subject: [PATCH 1/4] modify group size calculation

---
 .../source/src/components/BaseCarousel.vue    | 55 ++++++++++++++++---
 .../source/src/components/BatteryCard.vue     |  4 +-
 .../source/src/components/ChargePointCard.vue |  6 +-
 .../source/src/components/VehicleCard.vue     |  2 +-
 4 files changed, 52 insertions(+), 15 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 5a5d0ac250..d590571455 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -9,7 +9,7 @@
     @update:model-value="handleSlideChange"
     padding
     :navigation="groupedItems.length > 1"
-    :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
+    :arrows="showArrows"
     class="carousel-height"
     transition-next="slide-left"
     transition-prev="slide-right"
@@ -35,23 +35,61 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 
 const props = defineProps<{
   items: number[];
 }>();
 
-const $q = useQuasar();
-const currentSlide = ref<number>(0);
+const slideItemWidth = ref<number | null>(null);
+const currentSlideItem = ref<number | null>(null);
 const animated = ref<boolean>(true);
 const carouselRef = ref<{ $el: HTMLElement } | null>(null);
 const itemRef = ref<(HTMLElement | null)[]>([]);
 
+const showArrows = computed(() => {
+  return groupedItems.value.length > 1 && Screen.gt.xs;
+});
+
+const storeSlideItemWidth = (width: number) => {
+  console.log('Storing slide item width:', width);
+  slideItemWidth.value = width;
+}
+
+const currentSlide = computed({
+  get:() => {
+    if (currentSlideItem.value == null) {
+      return 0; // Always show the first slide if a specific item is not set
+    }
+    // Find the index of the slide containing the current item
+    let currentSlide = groupedItems.value.findIndex(group =>
+      group.includes(currentSlideItem.value),
+    );
+    if (currentSlide === -1) {
+      return 0; // Default to first slide if item not found
+    }
+    // Ensure the index is within bounds
+    return Math.min(currentSlide, groupedItems.value.length - 1);
+  },
+  set:(value: number) => {
+    // Update currentSlideItem to the first item of the new slide
+    currentSlideItem.value = groupedItems.value[value][0];
+  },
+});
+
 const groupSize = computed(() => {
-  if (!itemRef.value[0]) {
-    return; // Fallback if no item is present
+  let itemWidth = 300; // Default width
+  console.debug('Calculating group size...', itemRef.value);
+  if (slideItemWidth.value == null) {
+    if (itemRef.value[0]?.clientWidth && itemRef.value[0].clientWidth != slideItemWidth.value) {
+      storeSlideItemWidth(itemRef.value[0].clientWidth);
+    } else {
+      console.warn('Item width is not set, using default:', itemWidth);
+    }
+  } else {
+    itemWidth = slideItemWidth.value;
   }
-  const itemWidth = itemRef.value[0]?.clientWidth ?? 300; // Fallback
+  console.debug('Item width:', itemWidth);
   let carouselSlideWidth = 0;
   let padding = 0;
   const slideEl = carouselRef.value?.$el.querySelector('.q-carousel__slide');
@@ -83,9 +121,8 @@ const groupSize = computed(() => {
 });
 
 const groupedItems = computed(() => {
-  const groupSizeValue = groupSize.value ? groupSize.value : props.items.length;
   return props.items.reduce((resultArray, item, index) => {
-    const chunkIndex = Math.floor(index / groupSizeValue);
+    const chunkIndex = Math.floor(index / (groupSize.value ? groupSize.value : props.items.length));
     if (!resultArray[chunkIndex]) {
       resultArray[chunkIndex] = [];
     }
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 dd5500fa0d..eeadf3ff3e 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,7 +1,7 @@
 <template>
   <q-card
     ref="cardRef"
-    class="full-height card-width"
+    class="card-width"
     :class="{ 'battery-sum': props.batteryId === -1 }"
   >
     <q-card-section class="row items-center justify-between">
@@ -149,7 +149,7 @@ const dailyExportedEnergy = computed(() => {
 
 <style scoped>
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {
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 c90e223ceb..d920d2bf6d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="row">
+  <q-card ref="cardRef" class="card-width">
+    <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="name">
         {{ name }}
       </div>
@@ -287,7 +287,7 @@ const refreshSoc = () => {
 </script>
 <style lang="scss" scoped>
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {
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 c266bac2ea..324c2cdbc1 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -93,7 +93,7 @@ const refreshSoc = () => {
 
 <style lang="scss" scoped>
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {

From 02569f68b9fdc1ec34721a4bc5fcd2614818cc3a Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 25 Aug 2025 11:32:41 +0200
Subject: [PATCH 2/4] remove hard coded sizes

---
 .../koala/source/src/components/BaseTable.vue | 236 +++++++++---------
 .../source/src/components/BatteryCard.vue     |  10 +-
 .../src/components/BatterySettingsDialog.vue  |   9 +-
 .../source/src/components/ChargePointCard.vue |   8 +-
 .../src/components/ChargePointInformation.vue |  16 +-
 .../src/components/ChargePointModeButtons.vue |  18 +-
 .../src/components/ChargePointPowerData.vue   |   8 +-
 .../src/components/ChargePointSettings.vue    |   9 +-
 .../source/src/components/VehicleCard.vue     |  10 +-
 .../koala/source/src/pages/IndexPage.vue      |  10 +-
 10 files changed, 170 insertions(+), 164 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 e82b4365d9..bc2ec5edd8 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -1,132 +1,130 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      class="sticky-header-table"
-      :class="{ 'custom-table-height': tableHeight }"
-      :rows="mappedRows"
-      :columns="mappedColumns"
-      row-key="id"
-      v-model:expanded="expanded"
-      :filter="filterModel"
-      :filter-method="customFilterMethod"
-      virtual-scroll
-      :virtual-scroll-item-size="48"
-      :virtual-scroll-sticky-size-start="30"
-      @row-click="onRowClick"
-      binary-state-sort
-      :pagination="{ rowsPerPage: 0 }"
-      hide-bottom
-    >
-      <!-- search field ------------------------------------------------------->
-      <template #top v-if="searchInputVisible">
-        <div class="row full-width items-center q-mb-sm">
-          <div class="col">
-            <q-input
-              v-model="filterModel"
-              dense
-              outlined
-              color="white"
-              placeholder="Suchen..."
-              class="search-field white-outline-input"
-              input-class="text-white"
-            >
-              <template #append>
-                <q-icon name="search" color="white" />
-              </template>
-            </q-input>
-          </div>
-        </div>
-      </template>
-
-      <!-- header ----------------------------------------------------------->
-      <template v-if="props.rowExpandable" #header="header">
-        <q-tr :props="header">
-          <!-- space for arrow column -->
-          <q-th auto-width :props="{ ...header, col: {} }" />
-          <!-- the other columns -->
-          <q-th
-            v-for="column in header.cols"
-            :key="column.name"
-            :props="{ ...header, col: column }"
+  <q-table
+    class="sticky-header-table"
+    :class="{ 'custom-table-height': tableHeight }"
+    :rows="mappedRows"
+    :columns="mappedColumns"
+    row-key="id"
+    v-model:expanded="expanded"
+    :filter="filterModel"
+    :filter-method="customFilterMethod"
+    virtual-scroll
+    :virtual-scroll-item-size="48"
+    :virtual-scroll-sticky-size-start="30"
+    @row-click="onRowClick"
+    binary-state-sort
+    :pagination="{ rowsPerPage: 0 }"
+    hide-bottom
+  >
+    <!-- search field ------------------------------------------------------->
+    <template #top v-if="searchInputVisible">
+      <div class="row full-width items-center q-mb-sm">
+        <div class="col">
+          <q-input
+            v-model="filterModel"
+            dense
+            outlined
+            color="white"
+            placeholder="Suchen..."
+            class="search-field white-outline-input"
+            input-class="text-white"
           >
-            {{ column.label }}
-          </q-th>
-        </q-tr>
-      </template>
-
-      <!-- body ------------------------------------------------------------->
-      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
-        <q-tr
-          :key="`main-${rowProps.key}`"
-          :props="rowProps"
-          @click="onRowClick($event, rowProps.row)"
-          class="clickable"
-        >
-          <q-td auto-width>
-            <q-btn
-              dense
-              flat
-              round
-              size="sm"
-              :icon="
-                rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
-              "
-              @click.stop="rowProps.expand = !rowProps.expand"
-            />
-          </q-td>
-
-          <template v-for="column in rowProps.cols" :key="column.name">
-            <!-- custom body-cell slot -->
-            <template v-if="$slots[`body-cell-${column.name}`]">
-              <slot
-                :name="`body-cell-${column.name}`"
-                v-bind="{
-                  ...rowProps,
-                  col: column,
-                }"
-              >
-              </slot>
+            <template #append>
+              <q-icon name="search" color="white" />
             </template>
-
-            <!-- all other column data -->
-            <q-td
-              v-else
-              :props="{
+          </q-input>
+        </div>
+      </div>
+    </template>
+
+    <!-- header ----------------------------------------------------------->
+    <template v-if="props.rowExpandable" #header="header">
+      <q-tr :props="header">
+        <!-- space for arrow column -->
+        <q-th auto-width :props="{ ...header, col: {} }" />
+        <!-- the other columns -->
+        <q-th
+          v-for="column in header.cols"
+          :key="column.name"
+          :props="{ ...header, col: column }"
+        >
+          {{ column.label }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <!-- body ------------------------------------------------------------->
+    <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
+      <q-tr
+        :key="`main-${rowProps.key}`"
+        :props="rowProps"
+        @click="onRowClick($event, rowProps.row)"
+        class="clickable"
+      >
+        <q-td auto-width>
+          <q-btn
+            dense
+            flat
+            round
+            size="sm"
+            :icon="
+              rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+            "
+            @click.stop="rowProps.expand = !rowProps.expand"
+          />
+        </q-td>
+
+        <template v-for="column in rowProps.cols" :key="column.name">
+          <!-- custom body-cell slot -->
+          <template v-if="$slots[`body-cell-${column.name}`]">
+            <slot
+              :name="`body-cell-${column.name}`"
+              v-bind="{
                 ...rowProps,
                 col: column,
-                // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
-                value: rowProps.row[column.field as string],
               }"
             >
-              <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
-              {{ rowProps.row[column.field as string] }}
-            </q-td>
+            </slot>
           </template>
-        </q-tr>
-
-        <!-- expansion row -->
-        <q-tr
-          v-show="rowProps.expand"
-          :key="`xp-${rowProps.key}`"
-          :props="rowProps"
-          class="q-virtual-scroll--with-prev"
-        >
-          <q-td :colspan="rowProps.cols.length + 1">
-            <slot name="row-expand" v-bind="rowProps"> </slot>
+
+          <!-- all other column data -->
+          <q-td
+            v-else
+            :props="{
+              ...rowProps,
+              col: column,
+              // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
+              value: rowProps.row[column.field as string],
+            }"
+          >
+            <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
+            {{ rowProps.row[column.field as string] }}
           </q-td>
-        </q-tr>
-      </template>
-
-      <!-- forward any other slots not related to table  e.g top search field -------------------->
-      <template
-        v-for="slotName in forwardedSlotNames"
-        :key="slotName"
-        v-slot:[slotName]="slotProps"
+        </template>
+      </q-tr>
+
+      <!-- expansion row -->
+      <q-tr
+        v-show="rowProps.expand"
+        :key="`xp-${rowProps.key}`"
+        :props="rowProps"
+        class="q-virtual-scroll--with-prev"
       >
-        <slot :name="slotName" v-bind="slotProps"></slot>
-      </template>
-    </q-table>
-  </div>
+        <q-td :colspan="rowProps.cols.length + 1">
+          <slot name="row-expand" v-bind="rowProps"> </slot>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <!-- forward any other slots not related to table  e.g top search field -------------------->
+    <template
+      v-for="slotName in forwardedSlotNames"
+      :key="slotName"
+      v-slot:[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+  </q-table>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
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 eeadf3ff3e..92f214f914 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -147,26 +147,26 @@ const dailyExportedEnergy = computed(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .card-width {
   max-width: 22em;
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
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 0e1dbe62c6..0018a88498 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -1,8 +1,8 @@
 <template>
   <q-dialog
     v-model="isOpen"
-    :maximized="$q.screen.width < 385"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+    :maximized="isSmallScreen"
+    :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
     <q-card>
       <q-card-section>
@@ -25,11 +25,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 import BatteryModeButtons from './BatteryModeButtons.vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
-const $q = useQuasar();
 const isOpen = ref(false);
 
 const props = defineProps<{
@@ -38,6 +37,8 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
+const isSmallScreen = computed(() => Screen.lt.sm);
+
 const name = computed(() => {
   if (props.batteryId === undefined || props.batteryId === -1) {
     return 'Übergreifend';
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 d920d2bf6d..b6aec6421e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -291,20 +291,20 @@ const refreshSoc = () => {
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
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 211402add5..a3ea6f294d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -12,12 +12,12 @@
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="isMobile ? tableColumnsMobile : columnConfigDesktop"
+    :column-config="compactTable ? tableColumnsMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '45vh'"
+    :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
-    :row-expandable="isMobile"
+    :row-expandable="compactTable"
     @row-click="onRowClick"
   >
     <!-- desktop view table body slots -->
@@ -50,7 +50,7 @@
           :power="slotProps.row.power"
           :phase-number="slotProps.row.phaseNumber"
           :current="slotProps.row.current"
-          :column-display-format="isMobile"
+          :column-display-format="isSmallScreen"
         />
       </q-td>
     </template>
@@ -103,6 +103,9 @@
     v-model="modalChargePointCardVisible"
     transition-show="fade"
     transition-hide="fade"
+    :maximized="isSmallScreen"
+    :full-height="isSmallScreen"
+    :full-width="isSmallScreen"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
     <div class="dialog-content">
@@ -122,7 +125,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Platform } from 'quasar';
+import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
@@ -146,7 +149,8 @@ const cardViewBreakpoint = computed(
 const searchInputVisible = computed(
   () => mqttStore.themeConfiguration?.chargePoint_table_search_input_field,
 );
-const isMobile = computed(() => Platform.is.mobile);
+const isSmallScreen = computed(() => Screen.lt.sm);
+const compactTable = computed(() => Screen.lt.md);
 const selectedChargePointId = ref<number | null>(null);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
index e9c3824041..a1518837e3 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="q-pt-md full-width" v-if="isMobile">
+  <div
+    v-if="isMobile"
+    class="row q-pt-md full-width"
+  >
     <q-btn-dropdown
+      class="col"
       transition-show="scale"
       transition-hide="scale"
       transition-duration="500"
-      class="full-width"
       color="primary"
       :label="currentModeLabel"
       size="lg"
@@ -30,14 +33,17 @@
       </q-list>
     </q-btn-dropdown>
   </div>
-  <q-btn-group class="full-width q-mt-sm" v-else>
+  <q-btn-group
+    v-else
+    class="row col q-mt-sm"
+    spread
+  >
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
       :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       size="sm"
-      class="flex-grow"
       @click="chargeMode.value = mode.value"
     />
   </q-btn-group>
@@ -72,8 +78,4 @@ const currentModeLabel = computed(
   width: 0;
   padding: 0;
 }
-
-.flex-grow {
-  flex-grow: 1;
-}
 </style>
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 51d2014227..c2eee22a49 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'cp-power items-center q-gutter-xs',
+      'text-no-wrap items-center q-gutter-xs',
       columnDisplayFormat ? 'column' : 'row inline',
     ]"
   >
@@ -21,9 +21,3 @@ defineProps<{
   columnDisplayFormat?: boolean;
 }>();
 </script>
-
-<style scoped>
-.cp-power {
-  white-space: nowrap;
-}
-</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 6b4b23a89e..32f146fa47 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -1,8 +1,8 @@
 <template>
   <q-dialog
     v-model="visible"
-    :maximized="$q.platform.is.mobile"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+    :maximized="isSmallScreen"
+    :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
     <q-card>
       <q-card-section>
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar, QDialog } from 'quasar';
+import { Screen, QDialog } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed, ref, watch } from 'vue';
 import ChargePointInstantSettings from './ChargePointInstantSettings.vue';
@@ -87,7 +87,6 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 
-const $q = useQuasar();
 const mqttStore = useMqttStore();
 
 const props = defineProps<{
@@ -99,6 +98,8 @@ const emit = defineEmits<{
   'update:model-value': [value: boolean];
 }>();
 
+const isSmallScreen = computed(() => Screen.lt.sm);
+
 const tempValue = ref<boolean>(props.modelValue);
 
 watch(
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 324c2cdbc1..cf5717594f 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 ref="cardRef" class="full-height card-width">
+  <q-card ref="cardRef" class="card-width">
     <q-card-section class="row">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
         {{ vehicle?.name }}
@@ -97,20 +97,20 @@ const refreshSoc = () => {
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
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 fff1191a11..8fc13cc05c 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -65,12 +65,18 @@ const batteryConfigured = computed(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .chart-section {
   height: 40vh;
 }
 
-.tab-section :deep(.q-tab-panel) {
+.tab-section .q-tab-panel {
   max-width: 100vw;
 }
+
+@media screen and (max-width: $breakpoint-xs-max) {
+  .tab-section .q-tab-panel {
+    padding: 0;
+  }
+}
 </style>

From fc66c74d66087100f4911419758dc5018d0732ef Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 25 Aug 2025 11:33:31 +0200
Subject: [PATCH 3/4] close buttons

---
 .../src/components/BatterySettingsDialog.vue    | 10 ++++++----
 .../source/src/components/ChargePointCard.vue   |  7 +++++++
 .../src/components/ChargePointInformation.vue   | 17 +++++------------
 .../src/components/ChargePointSettings.vue      | 10 ++++++----
 4 files changed, 24 insertions(+), 20 deletions(-)

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 0018a88498..05cc0bfcc6 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -6,9 +6,14 @@
   >
     <q-card>
       <q-card-section>
-        <div class="row">
+        <div class="row no-wrap">
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            flat round dense v-close-popup
+          />
         </div>
       </q-card-section>
       <q-separator />
@@ -16,9 +21,6 @@
         <div class="text-subtitle2">Laden mit Überschuss Modus:</div>
         <BatteryModeButtons />
       </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </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 b6aec6421e..60aa272b80 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -4,6 +4,12 @@
       <div class="text-h6 text-bold ellipsis" :title="name">
         {{ 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 flex items-center justify-between">
@@ -117,6 +123,7 @@ const $q = useQuasar();
 
 const props = defineProps<{
   chargePointId: number;
+  closeButton?: 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 a3ea6f294d..991ddacc30 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -108,18 +108,11 @@
     :full-width="isSmallScreen"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
-    <div class="dialog-content">
-      <ChargePointCard
-        v-if="selectedChargePointId !== null"
-        :charge-point-id="selectedChargePointId"
-      >
-        <template #card-actions>
-          <q-btn color="primary" flat no-caps v-close-popup size="md">
-            Schließen
-          </q-btn>
-        </template>
-      </ChargePointCard>
-    </div>
+    <ChargePointCard
+      v-if="selectedChargePointId !== null"
+      :charge-point-id="selectedChargePointId"
+      :close-button="true"
+    />
   </q-dialog>
 </template>
 
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 32f146fa47..a46edf56a4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -6,9 +6,14 @@
   >
     <q-card>
       <q-card-section>
-        <div class="row">
+        <div class="row no-wrap">
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            flat round dense v-close-popup
+          />
         </div>
       </q-card-section>
       <q-separator />
@@ -66,9 +71,6 @@
           />
         </div>
       </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>

From 4d56b8d0b3ba7d08a42e0179523c95395877298a Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 25 Aug 2025 11:35:18 +0200
Subject: [PATCH 4/4] cleanup and formatting

---
 .../source/src/components/BaseCarousel.vue    | 21 +++++++++-----
 .../src/components/BatterySettingsDialog.vue  |  5 +---
 .../source/src/components/ChargePointCard.vue |  5 +++-
 .../src/components/ChargePointModeButtons.vue | 11 ++-----
 .../src/components/ChargePointSettings.vue    |  5 +---
 .../src/components/SystemInformation.vue      | 29 -------------------
 6 files changed, 21 insertions(+), 55 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/SystemInformation.vue

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 d590571455..cd87da0203 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -54,15 +54,15 @@ const showArrows = computed(() => {
 const storeSlideItemWidth = (width: number) => {
   console.log('Storing slide item width:', width);
   slideItemWidth.value = width;
-}
+};
 
 const currentSlide = computed({
-  get:() => {
+  get: () => {
     if (currentSlideItem.value == null) {
       return 0; // Always show the first slide if a specific item is not set
     }
     // Find the index of the slide containing the current item
-    let currentSlide = groupedItems.value.findIndex(group =>
+    let currentSlide = groupedItems.value.findIndex((group) =>
       group.includes(currentSlideItem.value),
     );
     if (currentSlide === -1) {
@@ -71,7 +71,7 @@ const currentSlide = computed({
     // Ensure the index is within bounds
     return Math.min(currentSlide, groupedItems.value.length - 1);
   },
-  set:(value: number) => {
+  set: (value: number) => {
     // Update currentSlideItem to the first item of the new slide
     currentSlideItem.value = groupedItems.value[value][0];
   },
@@ -81,7 +81,10 @@ const groupSize = computed(() => {
   let itemWidth = 300; // Default width
   console.debug('Calculating group size...', itemRef.value);
   if (slideItemWidth.value == null) {
-    if (itemRef.value[0]?.clientWidth && itemRef.value[0].clientWidth != slideItemWidth.value) {
+    if (
+      itemRef.value[0]?.clientWidth &&
+      itemRef.value[0].clientWidth != slideItemWidth.value
+    ) {
       storeSlideItemWidth(itemRef.value[0].clientWidth);
     } else {
       console.warn('Item width is not set, using default:', itemWidth);
@@ -99,7 +102,7 @@ const groupSize = computed(() => {
     padding =
       parseFloat(style.paddingLeft || '0') +
       parseFloat(style.paddingRight || '0');
-    }
+  }
   const maxGroupSize = Math.max(
     1,
     Math.floor((carouselSlideWidth - padding) / itemWidth),
@@ -112,7 +115,7 @@ const groupSize = computed(() => {
     props.items.length <= maxGroupSize * 2 &&
     props.items.length - maxGroupSize === 1
   ) {
-   // Check if all items would fit side by side
+    // Check if all items would fit side by side
     if (props.items.length * itemWidth <= carouselSlideWidth) {
       return props.items.length;
     }
@@ -122,7 +125,9 @@ const groupSize = computed(() => {
 
 const groupedItems = computed(() => {
   return props.items.reduce((resultArray, item, index) => {
-    const chunkIndex = Math.floor(index / (groupSize.value ? groupSize.value : props.items.length));
+    const chunkIndex = Math.floor(
+      index / (groupSize.value ? groupSize.value : props.items.length),
+    );
     if (!resultArray[chunkIndex]) {
       resultArray[chunkIndex] = [];
     }
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 05cc0bfcc6..f096f6514e 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -10,10 +10,7 @@
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
           <q-space />
-          <q-btn
-            icon="close"
-            flat round dense v-close-popup
-          />
+          <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-separator />
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 60aa272b80..fd7de40941 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -8,7 +8,10 @@
       <q-btn
         v-if="props.closeButton"
         icon="close"
-        flat round dense v-close-popup
+        flat
+        round
+        dense
+        v-close-popup
       />
     </q-card-section>
     <q-separator class="q-mt-sm" />
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
index a1518837e3..f3e7000a54 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="isMobile"
-    class="row q-pt-md full-width"
-  >
+  <div v-if="isMobile" class="row q-pt-md full-width">
     <q-btn-dropdown
       class="col"
       transition-show="scale"
@@ -33,11 +30,7 @@
       </q-list>
     </q-btn-dropdown>
   </div>
-  <q-btn-group
-    v-else
-    class="row col q-mt-sm"
-    spread
-  >
+  <q-btn-group v-else class="row col q-mt-sm" spread>
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
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 a46edf56a4..8c4a856f22 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -10,10 +10,7 @@
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
           <q-space />
-          <q-btn
-            icon="close"
-            flat round dense v-close-popup
-          />
+          <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-separator />
diff --git a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue b/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
deleted file mode 100644
index 80116c131c..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <p>IP: {{ mqttStore.systemIp }}</p>
-    <p>Version: {{ mqttStore.systemVersion }}</p>
-    <p>Time: {{ mqttStore.systemDateTime('locale-string') }}</p>
-    <p>Theme Configuration: {{ mqttStore.themeConfiguration }}</p>
-    <p>
-      General getter:
-      {{ mqttStore.getValue('openWB/general/web_theme', 'configuration') }}
-    </p>
-    <p>
-      Vehicle List:
-      {{ mqttStore.vehicleList }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-
-const mqttStore = useMqttStore();
-
-interface Props {
-  title: string;
-}
-
-defineProps<Props>();
-</script>