dashboard: adjust CSS for chart.js v4

continuation of opnsense@d752050 aspect-ratio introduced visual artifacts with dead space when resizing widgets.
ZaxLofful · Feb 12, 2025 · d988511 · d988511
1 parent 09eba5d
commit d988511
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
@@ -147,9 +147,12 @@ td {
 
 .canvas-container {
     position: relative;
+}
+
+.canvas-container > canvas {
     /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
-    aspect-ratio: 2;
-    overflow: hidden;
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cpu-canvas-container {

diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
@@ -148,9 +148,12 @@ td {
 
 .canvas-container {
     position: relative;
+}
+
+.canvas-container > canvas {
     /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
-    aspect-ratio: 2;
-    overflow: hidden;
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cpu-canvas-container {

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
@@ -148,9 +148,12 @@ td {
 
 .canvas-container {
     position: relative;
+}
+
+.canvas-container > canvas {
     /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
-    aspect-ratio: 2;
-    overflow: hidden;
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cpu-canvas-container {