Merge pull request #358 from AOEpeople/bugfix/#260360-tv-responsivness

added a minimum height for the central component to fix overflowing
AOEpeople · Oct 11, 2023 · 3359c1e · 3359c1e
2 parents 6fd4fd8 + dcf8762
commit 3359c1e
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/Resources/src/services/useComponentHeights.ts b/src/Resources/src/services/useComponentHeights.ts
@@ -8,6 +8,8 @@ interface IComponentHeightState {
   screenHeight: number
 }
 
+const MIN_TABLE_HEIGHT = 250;
+
 const listenerActive = ref(false);
 
 const windowWidth = ref(0);
@@ -27,15 +29,25 @@ const componentHeightState = reactive<IComponentHeightState>({
  * Computed maximum possible height of the table body of the ParticipantsTableBody component.
  */
 const maxTableHeight = computed(() => {
-  return componentHeightState.screenHeight - (componentHeightState.navBarHeight + componentHeightState.tableHeadHeight + componentHeightState.mealListHeight + componentHeightState.mealOverviewHeight);
+  const height = componentHeightState.screenHeight - (componentHeightState.navBarHeight + componentHeightState.tableHeadHeight + componentHeightState.mealListHeight + componentHeightState.mealOverviewHeight);
+  if (height < MIN_TABLE_HEIGHT) {
+    return MIN_TABLE_HEIGHT;
+  }
+
+  return height;
 });
 
 /**
  * Computed maximum possible height of the NoParticipations-component.
  */
 const maxNoParticipationsHeight = computed(() => {
-  return componentHeightState.screenHeight - (componentHeightState.navBarHeight + componentHeightState.mealOverviewHeight);
-})
+  const height =  componentHeightState.screenHeight - (componentHeightState.navBarHeight + componentHeightState.mealOverviewHeight);
+  if (height < MIN_TABLE_HEIGHT) {
+    return MIN_TABLE_HEIGHT;
+  }
+
+  return height;
+});
 
 /**
  * Computes the sum of margin-bottom and margin-top of an HTMLELement.