From eb2c0c23b552be04640c0b42d0bd5090335383c4 Mon Sep 17 00:00:00 2001
From: andersonid <nobre.it@gmail.com>
Date: Fri, 3 Oct 2025 09:38:17 -0300
Subject: [PATCH] Fix: improve chart dimensions and aspect ratio to prevent
 squeezed appearance

---
 app/static/index.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index e9039f9..7937620 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -2654,8 +2654,8 @@
                                 </h3>
                         </div>
                             <div style="padding: 20px;">
-                                <div style="height: 300px; position: relative;">
-                                    <div id="${cpuChartId}" style="width: 100%; height: 200px; min-height: 200px;"></div>
+                                <div style="height: 350px; position: relative;">
+                                    <div id="${cpuChartId}" style="width: 100%; height: 300px; min-height: 300px;"></div>
                         </div>
                                 ${cpuData.data && cpuData.data.length > 0 ? `
                                     <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
@@ -2684,8 +2684,8 @@
                                 </h3>
                             </div>
                             <div style="padding: 20px;">
-                                <div style="height: 300px; position: relative;">
-                                    <div id="${memoryChartId}" style="width: 100%; height: 200px; min-height: 200px;"></div>
+                                <div style="height: 350px; position: relative;">
+                                    <div id="${memoryChartId}" style="width: 100%; height: 300px; min-height: 300px;"></div>
                         </div>
                                 ${memoryData.data && memoryData.data.length > 0 ? `
                                     <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
@@ -2914,9 +2914,9 @@
             // Clear container
             container.innerHTML = '';
             
-            // Get container dimensions
+            // Get container dimensions and ensure proper aspect ratio
             const containerWidth = container.offsetWidth || 400;
-            const containerHeight = container.offsetHeight || 200;
+            const containerHeight = Math.max(container.offsetHeight || 200, 250); // Minimum height of 250px
             
             // Create Victory chart using React.createElement
             const chart = React.createElement(Victory.VictoryChart, {
@@ -2924,6 +2924,7 @@
                 height: containerHeight,
                 theme: Victory.VictoryTheme.material,
                 scale: { x: 'time' },
+                padding: { top: 20, bottom: 50, left: 60, right: 20 },
                 style: {
                     parent: { 
                         background: '#1E1E1E',
@@ -2997,9 +2998,9 @@
             // Clear container
             container.innerHTML = '';
             
-            // Get container dimensions
+            // Get container dimensions and ensure proper aspect ratio
             const containerWidth = container.offsetWidth || 400;
-            const containerHeight = container.offsetHeight || 200;
+            const containerHeight = Math.max(container.offsetHeight || 200, 250); // Minimum height of 250px
             
             // Create Victory chart using React.createElement
             const chart = React.createElement(Victory.VictoryChart, {
@@ -3007,6 +3008,7 @@
                 height: containerHeight,
                 theme: Victory.VictoryTheme.material,
                 scale: { x: 'time' },
+                padding: { top: 20, bottom: 50, left: 60, right: 20 },
                 style: {
                     parent: { 
                         background: '#1E1E1E',