From c864664536048580281ad638fd07a15c5f3c63f5 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 14 Apr 2025 21:41:55 +0200
Subject: [PATCH] Refactor iframe height computation for responsiveness

Replaces the hard-coded iframe height logic with a computed property to dynamically adjust height based on screen width. This simplifies the code and improves maintainability while ensuring proper responsive design behavior.
---
 frontend/src/components/BuildServerStats.vue | 40 ++++----------------
 1 file changed, 8 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/BuildServerStats.vue b/frontend/src/components/BuildServerStats.vue
index 5f601ec..1c8f93d 100644
--- a/frontend/src/components/BuildServerStats.vue
+++ b/frontend/src/components/BuildServerStats.vue
@@ -2,7 +2,7 @@
   <v-sheet class="mt-2" color="transparent">
     <h5 class="text-h5">Buildserver Stats</h5>
     <iframe
-      :height="width <= 800 ? `${IFRAME_HEIGHT}px` : '420px'"
+      :height="iframeHeight"
       allowtransparency="true"
       class="w-100 border-0"
       src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
@@ -11,40 +11,16 @@
 
 <script lang="ts" setup>
 import { useDisplay } from 'vuetify'
+import { computed } from 'vue'
 
 const { width } = useDisplay()
 
-/**
- * Represents the height of a graph in pixels.
- * This constant is used to define the vertical dimension of the graph
- * when rendering it in a user interface or graphical representation.
- *
- * @constant {number} GRAPH_HEIGHT
- */
+// Configuration constants
 const GRAPH_HEIGHT = 335
-/**
- * Represents the total number of graphs to be processed or displayed.
- *
- * This variable is used to define the fixed amount of graphs that the system
- * is intended to handle at a given time. It can be leveraged to set limits
- * on iterations, arrays, or display logic related to graph management.
- *
- * Default value: 4
- *
- * Type: number
- */
 const NUMBER_OF_GRAPHS = 4
-/**
- * Represents the height of an iframe calculated dynamically based on the number of graphs
- * and the height of each graph.
- *
- * IFRAME_HEIGHT is determined by multiplying the number of graphs (`NUMBER_OF_GRAPHS`)
- * displayed in the iframe by the height of a single graph (`GRAPH_HEIGHT`).
- *
- * This variable is commonly used to ensure the iframe adjusts correctly to accommodate
- * all graphs without introducing unnecessary scrollbars.
- *
- * @constant {number} IFRAME_HEIGHT
- */
-const IFRAME_HEIGHT = NUMBER_OF_GRAPHS * GRAPH_HEIGHT
+
+// Computed property for responsive iframe height
+const iframeHeight = computed(() =>
+  width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
+)
 </script>