Make tables take up full vertical space in tabs

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>

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;

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>

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>

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"

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 {

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"

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>