From 640962d9270db42f783b2e0e3da40661ba3af031 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Sat, 12 Jun 2021 00:21:13 -0400
Subject: [PATCH] Fix vertical size calculation

---
 app/src/modules/insights/components/workspace.vue | 12 ++++++++----
 app/src/modules/insights/routes/dashboard.vue     |  4 +---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/src/modules/insights/components/workspace.vue b/app/src/modules/insights/components/workspace.vue
index 5582b0537f..21a94a5407 100644
--- a/app/src/modules/insights/components/workspace.vue
+++ b/app/src/modules/insights/components/workspace.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 		const zoomScale = computed(() => {
 			if (props.zoomToFit === false) return 1;
 
-			const { width } = mainElementSize;
+			const { width, height } = mainElementSize;
 
 			const contentPadding = getComputedStyle(document.querySelector('#main-content') as HTMLElement).getPropertyValue(
 				'--content-padding'
@@ -99,10 +99,14 @@ export default defineComponent({
 			const contentPaddingPx = Number(contentPadding.substring(0, contentPadding.length - 2));
 
 			const scaleWidth: number =
-				width.value /
-				(Number(workspaceSize.value.width.substring(0, workspaceSize.value.width.length - 2)) + 2 * contentPaddingPx);
+				(width.value - 2 * contentPaddingPx) /
+				Number(workspaceSize.value.width.substring(0, workspaceSize.value.width.length - 2));
 
-			return scaleWidth;
+			const scaleHeight: number =
+				(height.value - 114 - contentPaddingPx) /
+				Number(workspaceSize.value.height.substring(0, workspaceSize.value.height.length - 2));
+
+			return Math.min(scaleWidth, scaleHeight);
 		});
 
 		return { workspaceSize, mainElement, zoomScale };
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index 740a41c0ce..6133840d9a 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -52,9 +52,7 @@
 			<insights-navigation />
 		</template>
 
-		<div class="insights">
-			<insights-workspace :edit-mode="editMode" :panels="panels" :zoom-to-fit="zoomToFit" />
-		</div>
+		<insights-workspace :edit-mode="editMode" :panels="panels" :zoom-to-fit="zoomToFit" />
 
 		<router-view
 			name="detail"