From 0d277eaa94a2878cbc0e20b888ebc788577f0671 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 15 Sep 2025 13:05:36 +0200
Subject: [PATCH 1/5] tab flex layout

---
 .../koala/source/src/css/quasar.variables.scss  |  3 +--
 .../koala/source/src/pages/IndexPage.vue        | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index f2ccdc87b6..4c0f7ed649 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -137,8 +137,7 @@ $battery: #ba7128;
   }
   // Table styling
   .sticky-header-table {
-    /* height or max-height is important */
-    height: 310px;
+    flex-grow: 1;
 
     .q-table__top,
     .q-table__bottom,
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 8fc13cc05c..344ac94465 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -22,17 +22,17 @@
         </q-tab> -->
       </q-tabs>
       <!-- Tab Panels -->
-      <q-tab-panels v-model="tab" class="col">
+      <q-tab-panels v-model="tab" class="col column">
         <!-- Charge Points -->
-        <q-tab-panel name="charge-points">
+        <q-tab-panel name="charge-points" class="column">
           <ChargePointInformation />
         </q-tab-panel>
         <!-- Vehicles -->
-        <q-tab-panel name="vehicles">
+        <q-tab-panel name="vehicles" class="column">
           <VehicleInformation />
         </q-tab-panel>
         <!-- Batteries -->
-        <q-tab-panel v-if="batteryConfigured" name="batteries">
+        <q-tab-panel v-if="batteryConfigured" name="batteries" class="column">
           <BatteryInformation />
         </q-tab-panel>
         <!-- Smart Home -->
@@ -68,10 +68,19 @@ const batteryConfigured = computed(() => {
 <style scoped lang="scss">
 .chart-section {
   height: 40vh;
+  min-height: 350px;
+}
+
+.tab-section,
+.tab-section :deep(.q-panel-parent .q-panel) {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .tab-section .q-tab-panel {
   max-width: 100vw;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: $breakpoint-xs-max) {

From 1bfe753739b191edf0ed0f09e711116c5c03eef9 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 15 Sep 2025 13:05:52 +0200
Subject: [PATCH 2/5] cleanup dark theme css

---
 .../source/src/css/quasar.variables.scss      | 69 -------------------
 1 file changed, 69 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 4c0f7ed649..1390852415 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -257,12 +257,8 @@ $dark-tab-icon: #d7d9e0;
   .theme-text {
     color: var(--q-white) !important;
   }
-  .deselected {
-    color: var(--q-grey) !important;
-  }
   // Header colors
   .q-header {
-    background-color: var(--q-background-2);
     color: var(--q-white);
   }
   // Drawer background
@@ -275,17 +271,6 @@ $dark-tab-icon: #d7d9e0;
       color: var(--q-tab-icon) !important;
     }
   }
-  // Tab panel background
-  .q-tab-panels {
-    background-color: var(--q-background-2);
-  }
-  // Tab CSS
-  .q-tab {
-    background-color: var(--q-background-2);
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border: 1px solid var(--q-secondary);
-  }
   // Tab active background color
   .q-tab--active {
     background-color: color.scale($dark-secondary, $lightness: 10%);
@@ -293,26 +278,20 @@ $dark-tab-icon: #d7d9e0;
   // Carousel control arrows and buttons
   .q-carousel__control {
     .q-btn {
-      &:before {
-        box-shadow: none;
-      }
       .q-icon {
         color: var(--q-carousel-control);
         &:before {
           color: var(--q-carousel-control);
-          box-shadow: none;
         }
       }
     }
   }
   // Slide container background
   .q-carousel__slide {
-    background-color: var(--q-background-2);
     color: var(--q-white);
   }
   // Slide background
   .q-card {
-    background-color: var(--q-secondary);
     color: var(--q-white);
   }
   // Input field text label color
@@ -350,65 +329,17 @@ $dark-tab-icon: #d7d9e0;
 
   // Table styling - Dark Theme
   .sticky-header-table {
-    /* height or max-height is important */
-    height: 310px;
-
-    .q-table__top,
-    .q-table__bottom,
-    thead tr:first-child th {
-      background-color: var(--q-primary);
-      color: var(--q-white);
-      font-size: 0.9rem;
-    }
-
-    thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-
-    thead tr:first-child th {
-      top: 0;
-    }
-
-    /* this is when the loading indicator appears */
-    &.q-table--loading thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-
-    /* prevent scrolling behind sticky top row on focus */
     tbody {
-      /* height of all previous header rows */
-      scroll-margin-top: 48px;
-      background-color: var(--q-secondary);
       color: var(--q-white);
     }
 
-    tbody tr,
-    .q-table__middle,
-    .q-table__grid-content {
-      background-color: var(--q-secondary);
-    }
-
     tbody tr:hover {
       background-color: rgba(255, 255, 255, 0.07);
     }
-
-    // Scrollbar styling for tables - Dark Theme
-    .q-table__middle.q-virtual-scroll {
-      // Firefox
-      scrollbar-width: thin;
-      scrollbar-color: var(--q-primary) var(--q-secondary);
-    }
-  }
-
-  .q-scrollarea {
-    border: 1px solid var(--q-secondary) !important;
   }
 
   //Scrollbar styling für .q-list - Dark Theme
   .q-list {
-    scrollbar-width: thin;
     scrollbar-color: var(--q-primary) var(--q-list);
   }
 }

From d19eb9ab2f43c52ce7acfad5757564edfc07e9ac Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 15 Sep 2025 15:50:52 +0200
Subject: [PATCH 3/5] optimize table cell width

---
 .../source/src/components/BatteryCard.vue     | 12 ++---
 .../src/components/ChargePointInformation.vue | 44 +++++++++++++++----
 .../source/src/components/VehicleCard.vue     |  2 +-
 .../src/components/VehicleInformation.vue     | 32 ++++++++++++--
 .../source/src/css/quasar.variables.scss      |  1 +
 5 files changed, 74 insertions(+), 17 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 e94f44a0ab..202d5a9390 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -7,15 +7,17 @@
       'full-height': props.fullHeight,
     }"
   >
-    <q-card-section class="row items-center justify-between">
+    <q-card-section class="row no-wrap items-center justify-between">
       <div class="text-h6 text-bold ellipsis" :title="cardTitle">
         {{ cardTitle }}
       </div>
-      <q-icon
-        class="cursor-pointer q-ml-auto"
+      <q-space />
+      <q-btn
         v-if="showSettings"
-        name="settings"
-        size="sm"
+        icon="settings"
+        flat
+        round
+        dense
         @click="dialog?.open()"
       />
     </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 6c03688eaa..c336ec1c70 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -23,20 +23,30 @@
     @row-click="onRowClick"
   >
     <!-- full view table body slots -->
+    <template #body-cell-name="slotProps">
+      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
+        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
+      </q-td>
+    </template>
+    <template #body-cell-vehicle="slotProps">
+      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
+        <div class="ellipsis" :title="slotProps.row.vehicle">{{ slotProps.row.vehicle }}</div>
+      </q-td>
+    </template>
     <template #body-cell-plugged="slotProps">
-      <q-td :class="`text-${slotProps.col.align}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
       </q-td>
     </template>
 
     <template #body-cell-chargeMode="slotProps">
-      <q-td :class="`text-${slotProps.col.align}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <ChargePointMode :charge-point-id="slotProps.row.id" />
       </q-td>
     </template>
 
     <template #body-cell-timeCharging="slotProps">
-      <q-td :class="`text-${slotProps.col.align}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <ChargePointTimeCharging
           :charge-point-id="slotProps.row.id"
           :readonly="true"
@@ -47,7 +57,7 @@
     </template>
 
     <template #body-cell-powerColumn="slotProps">
-      <q-td :class="`text-${slotProps.col.align}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <ChargePointPowerData
           :power="slotProps.row.power"
           :phase-number="slotProps.row.phaseNumber"
@@ -56,18 +66,30 @@
         />
       </q-td>
     </template>
+    <template #body-cell-charged="slotProps">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.charged }}
+      </q-td>
+    </template>
+    <template #body-cell-soc="slotProps">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.soc }}
+      </q-td>
+    </template>
     <!-- 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 />
-        <span class="text-caption">{{ slotProps.row.vehicle }}</span>
+      <q-td
+        :class="[`text-${slotProps.col.align}`, 'max-width-0']"
+      >
+        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
+        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">{{ slotProps.row.vehicle }}</div>
       </q-td>
     </template>
 
     <!-- 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}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <div class="items-center">
           <ChargePointMode :charge-point-id="slotProps.row.id" />
           <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -228,3 +250,9 @@ const onRowClick = (row: ChargePointRow) => {
   modalChargePointCardVisible.value = true;
 };
 </script>
+
+<style scoped lang="scss">
+.max-width-0 {
+  max-width: 0;
+}
+</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 75f018fa28..4560545263 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -4,7 +4,7 @@
     class="card-width"
     :class="{ 'full-height': props.fullHeight }"
   >
-    <q-card-section class="row">
+    <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
         {{ vehicle?.name }}
       </div>
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 dc1c85ee87..8e75953d22 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -23,13 +23,33 @@
     @row-click="onRowClick"
   >
     <!-- "col" = column must match Quasar naming convention -->
+    <template #row-expand="slotProps">
+      <VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
+    </template>
+    <template #body-cell-name="slotProps">
+      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
+        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
+      </q-td>
+    </template>
+    <template #body-cell-manufacturer="slotProps">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.manufacturer }}
+      </q-td>
+    </template>
+    <template #body-cell-model="slotProps">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.model }}
+      </q-td>
+    </template>
     <template #body-cell-plugged="slotProps">
-      <q-td :class="`text-${slotProps.col.align}`">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
         <ChargePointStateIcon :vehicle-id="slotProps.row.id" />
       </q-td>
     </template>
-    <template #row-expand="slotProps">
-      <VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
+    <template #body-cell-vehicleSocValue="slotProps">
+      <q-td auto-width :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.vehicleSocValue }}
+      </q-td>
     </template>
   </BaseTable>
 
@@ -119,3 +139,9 @@ const onRowClick = (row: VehicleRow) => {
   modalChargeVehicleCardVisible.value = true;
 };
 </script>
+
+<style scoped lang="scss">
+.max-width-0 {
+  max-width: 0;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 1390852415..286da62c15 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -138,6 +138,7 @@ $battery: #ba7128;
   // Table styling
   .sticky-header-table {
     flex-grow: 1;
+    max-width: 100%;
 
     .q-table__top,
     .q-table__bottom,

From 17b9e864da5ce89b1acb0c12cdece68a018c6daf Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Mon, 15 Sep 2025 15:52:08 +0200
Subject: [PATCH 4/5] linting

---
 .../src/components/ChargePointInformation.vue | 20 ++++++++++++-------
 .../src/components/VehicleInformation.vue     |  4 +++-
 .../charts/historyChart/HistoryChart.vue      |  6 ++++--
 3 files changed, 20 insertions(+), 10 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 c336ec1c70..ed7e453845 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -25,12 +25,16 @@
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
+        <div class="ellipsis" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
+        </div>
       </q-td>
     </template>
     <template #body-cell-vehicle="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.vehicle">{{ slotProps.row.vehicle }}</div>
+        <div class="ellipsis" :title="slotProps.row.vehicle">
+          {{ slotProps.row.vehicle }}
+        </div>
       </q-td>
     </template>
     <template #body-cell-plugged="slotProps">
@@ -79,11 +83,13 @@
     <!-- 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}`, 'max-width-0']"
-      >
-        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
-        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">{{ slotProps.row.vehicle }}</div>
+      <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
+        <div class="ellipsis" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
+        </div>
+        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
+          {{ slotProps.row.vehicle }}
+        </div>
       </q-td>
     </template>
 
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 8e75953d22..d2b3cb2cd6 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -28,7 +28,9 @@
     </template>
     <template #body-cell-name="slotProps">
       <q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
-        <div class="ellipsis" :title="slotProps.row.name">{{ slotProps.row.name }}</div>
+        <div class="ellipsis" :title="slotProps.row.name">
+          {{ slotProps.row.name }}
+        </div>
       </q-td>
     </template>
     <template #body-cell-manufacturer="slotProps">
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index f0d2830667..4ac4acbd29 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -178,9 +178,11 @@ const chartLabels = computed(() => {
     : Math.floor(Date.now() / 1000);
   const dataRange = maxTimestamp - minTimestamp;
   let range = 300; // 5 Minuten
-  if (dataRange <= 30 * 60) { // bis 15 Minuten
+  if (dataRange <= 30 * 60) {
+    // bis 30 Minuten
     range = 60; // 1 Minute
-  } else if (dataRange <= 60 * 60) { // bis 30 Minuten
+  } else if (dataRange <= 60 * 60) {
+    // bis 60 Minuten
     range = 120; // 2 Minuten
   }
 

From 4c89bfcb5a3086881fa05e9bc6c77531b0e7d5c3 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Tue, 16 Sep 2025 08:40:28 +0200
Subject: [PATCH 5/5] no wrap in power data

---
 .../koala/source/src/components/ChargePointPowerData.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 5cb495d239..e34fc202db 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -2,7 +2,7 @@
   <div
     :class="[
       'text-no-wrap items-center',
-      columnDisplayFormat ? 'column' : 'row inline',
+      columnDisplayFormat ? 'column' : 'row inline no-wrap',
     ]"
   >
     <span>{{ power }}</span>