From ef472acb2545ff1f3831dc8602e2c37aed5f6ffd Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 17 Jun 2025 15:03:46 +0200
Subject: [PATCH] Make tables take up full vertical space in tab

---
 .../source/src/components/BaseCarousel.vue    |  18 +++-
 .../koala/source/src/components/BaseTable.vue |   8 +-
 .../source/src/components/BatteryCard.vue     |   2 +-
 .../source/src/components/ChargePointCard.vue |   2 +-
 .../src/components/ChargePointInformation.vue |   1 -
 .../source/src/components/VehicleCard.vue     |   2 +-
 .../src/components/VehicleInformation.vue     |   1 -
 .../koala/source/src/pages/IndexPage.vue      | 100 ++++++++++++------
 8 files changed, 91 insertions(+), 43 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 34dd07355c..1df90217b1 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,10 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
-    class="carousel-height q-mt-md"
+    :class="[
+      'q-mt-md',
+      isMobile ? 'carousel-height-mobile' : 'carousel-height-desktop',
+    ]"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent
@@ -34,7 +37,9 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { useQuasar, Platform } from 'quasar';
+
+const isMobile = computed(() => Platform.is.mobile);
 
 const props = defineProps<{
   items: number[];
@@ -140,11 +145,18 @@ watch(
 .carousel-slide {
   padding: 0;
 }
+
 .item-container {
   padding: 0.25em;
 }
-.carousel-height {
+
+.carousel-height-mobile {
   min-height: fit-content;
   height: 100%;
 }
+
+.carousel-height-desktop {
+  min-height: fit-content;
+  height: auto;
+}
 </style>
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 902af8e808..c6f7f34632 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-md full-height">
     <q-table
-      class="sticky-header-table"
+      class="sticky-header-table full-height"
       :rows="mappedRows"
       :columns="mappedColumns"
       row-key="id"
@@ -10,8 +10,7 @@
       :filter-method="customFilterMethod"
       virtual-scroll
       :virtual-scroll-item-size="48"
-      :virtual-scroll-sticky-size-start="48"
-      :style="{ height: tableHeight }"
+      :virtual-scroll-sticky-size-start="30"
       @row-click="onRowClick"
       binary-state-sort
       :pagination="{ rowsPerPage: 0 }"
@@ -144,7 +143,6 @@ const props = defineProps<{
   columnConfig: ColumnConfiguration[];
   rowKey?: string;
   searchInputVisible?: boolean;
-  tableHeight?: string;
   filter?: string;
   columnsToSearch?: string[];
   rowExpandable?: boolean;
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 8281c7a728..f3c283c5c1 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -134,6 +134,6 @@ const dailyExportedEnergy = computed(() => {
 
 <style scoped>
 .card-width {
-  min-width: 24em;
+  width: 22em;
 }
 </style>
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 0ec8e4b857..fc3ee385d3 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -276,6 +276,6 @@ const refreshSoc = () => {
 </script>
 <style lang="scss" scoped>
 .card-width {
-  max-width: 24em;
+  width: 22em;
 }
 </style>
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 a969a3a58e..5c29d76289 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -14,7 +14,6 @@
     :row-data="tableRowData"
     :column-config="isMobile ? tableColumnsMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
     :row-expandable="isMobile"
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 588f65d62c..002f4f651d 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -101,7 +101,7 @@ const refreshSoc = () => {
 
 <style lang="scss" scoped>
 .card-width {
-  min-width: 24em;
+  width: 22em;
 }
 
 .slider-container {
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 6a2b43dcd5..7343647ad7 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -14,7 +14,6 @@
     :row-data="tableRowData"
     :column-config="isMobile ? columnConfigMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['name', 'manufacturer', 'model']"
     :row-expandable="true"
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 6d990d3d90..665b469a1d 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -6,44 +6,60 @@
     </div>
 
     <!-- Navigation Tabs -->
-    <q-tabs v-model="tab" dense class="q-tabs__content--align-justify">
-      <q-tab name="charge-points" title="Ladepunkte">
-        <q-icon name="ev_station" size="md" color="primary" />
-      </q-tab>
-      <q-tab name="vehicles" title="Fahrzeuge">
-        <q-icon name="directions_car" size="md" color="primary" />
-      </q-tab>
-      <q-tab name="batteries" title="Speicher">
-        <q-icon name="battery_full" size="md" color="primary" />
-      </q-tab>
-      <!-- <q-tab name="smart-home" title="SmartHome">
+    <div class="tab-section">
+      <q-tabs v-model="tab" dense class="q-tabs__content--align-justify">
+        <q-tab name="charge-points" title="Ladepunkte">
+          <q-icon name="ev_station" size="md" color="primary" />
+        </q-tab>
+        <q-tab name="vehicles" title="Fahrzeuge">
+          <q-icon name="directions_car" size="md" color="primary" />
+        </q-tab>
+        <q-tab name="batteries" title="Speicher">
+          <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-tabs>
-    <!-- Tab Panels -->
-    <q-tab-panels v-model="tab" class="col">
-      <!-- Charge Points -->
-      <q-tab-panel name="charge-points" class="q-pa-none column">
-        <ChargePointInformation />
-      </q-tab-panel>
-      <!-- Vehicles -->
-      <q-tab-panel name="vehicles" class="q-pa-none column">
-        <VehicleInformation />
-      </q-tab-panel>
-      <!-- Batteries -->
-      <q-tab-panel name="batteries" class="">
-        <BatteryInformation />
-      </q-tab-panel>
-      <!-- Smart Home -->
-      <!-- <q-tab-panel name="smart-home" class="">
+      </q-tabs>
+      <!-- Tab Panels -->
+      <q-tab-panels v-model="tab" class="col">
+        <!-- Charge Points -->
+        <q-tab-panel
+          name="charge-points"
+          class="q-pa-none column"
+          :class="[
+            'q-pa-none column',
+            isChargePointTableView ? '' : 'remove-flex-properties',
+          ]"
+        >
+          <ChargePointInformation />
+        </q-tab-panel>
+        <!-- Vehicles -->
+        <q-tab-panel
+          name="vehicles"
+          :class="[
+            'q-pa-none column',
+            isVehicleTableView ? '' : 'remove-flex-properties',
+          ]"
+        >
+          <VehicleInformation />
+        </q-tab-panel>
+        <!-- Batteries -->
+        <q-tab-panel name="batteries" class="remove-flex-properties">
+          <BatteryInformation />
+        </q-tab-panel>
+        <!-- Smart Home -->
+        <!-- <q-tab-panel name="smart-home" class="">
         <SmartHomeInformation />
       </q-tab-panel> -->
-    </q-tab-panels>
+      </q-tab-panels>
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
 import ChartCarousel from 'src/components/ChartCarousel.vue';
 import ChargePointInformation from 'src/components/ChargePointInformation.vue';
 import BatteryInformation from 'src/components/BatteryInformation.vue';
@@ -53,12 +69,36 @@ import VehicleInformation from 'src/components/VehicleInformation.vue';
 defineOptions({
   name: 'IndexPage',
 });
+const mqttStore = useMqttStore();
 
 const tab = ref<string>('charge-points');
+
+const isChargePointTableView = computed(() => {
+  const cardViewBreakpoint =
+    mqttStore.themeConfiguration?.chargePoint_card_view_breakpoint || 4;
+  return mqttStore.chargePointIds.length > cardViewBreakpoint;
+});
+
+const isVehicleTableView = computed(() => {
+  const cardViewBreakpoint =
+    mqttStore.themeConfiguration?.vehicle_card_view_breakpoint || 4;
+  return mqttStore.vehicleList.length > cardViewBreakpoint;
+});
 </script>
 
 <style scoped>
 .chart-section {
   height: 40vh;
 }
+.tab-section {
+  flex: 1 1 0; /* allow the tab section to grow and shrink - flex-grow - flex-shrink - flex-basis */
+  min-height: 0; /* important for flexbox overflow */
+  display: flex;
+  flex-direction: column;
+}
+/* "remove-flex-properties" prevents cards from stretching total vertical space in card view  */
+.remove-flex-properties {
+  flex: none !important;
+  height: auto !important;
+}
 </style>