Remove full table height formatting (#2492)

Author: Brett-S-OWB

packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue

@@ -9,10 +9,7 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
-    :class="[
-      'q-mt-md',
-      isMobile ? 'carousel-height-mobile' : 'carousel-height-desktop',
-    ]"
+    class="carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent
@@ -37,9 +34,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import { useQuasar, Platform } from 'quasar';
-
-const isMobile = computed(() => Platform.is.mobile);
+import { useQuasar } from 'quasar';
 
 const props = defineProps<{
   items: number[];
@@ -150,13 +145,8 @@ watch(
   padding: 0.25em;
 }
 
-.carousel-height-mobile {
+.carousel-height {
   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 full-height">
+  <div class="q-pa-md">
     <q-table
-      class="sticky-header-table full-height"
+      class="sticky-header-table"
       :rows="mappedRows"
       :columns="mappedColumns"
       row-key="id"
@@ -143,6 +143,7 @@ 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/ChargePointInformation.vue

@@ -14,6 +14,7 @@
     :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/VehicleInformation.vue

@@ -14,6 +14,7 @@
     :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

@@ -24,24 +24,11 @@
       <!-- 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',
-          ]"
-        >
+        <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',
-            isVehicleTableView ? '' : 'remove-flex-properties',
-          ]"
-        >
+        <q-tab-panel name="vehicles" class="q-pa-none column">
           <VehicleInformation />
         </q-tab-panel>
         <!-- Batteries -->
@@ -58,8 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useMqttStore } from 'src/stores/mqtt-store';
+import { ref } from 'vue';
 import ChartCarousel from 'src/components/ChartCarousel.vue';
 import ChargePointInformation from 'src/components/ChargePointInformation.vue';
 import BatteryInformation from 'src/components/BatteryInformation.vue';
@@ -69,36 +55,12 @@ 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>