From d988511b7e8194aa1f82e697c6d6ebcdce9b2c09 Mon Sep 17 00:00:00 2001 From: Stephan de Wit Date: Wed, 12 Feb 2025 16:08:18 +0100 Subject: [PATCH] dashboard: adjust CSS for chart.js v4 continuation of https://github.com/opnsense/core/commit/d752050a1147325fdfd422d7a8bdd63da1fa16a9 aspect-ratio introduced visual artifacts with dead space when resizing widgets. --- src/opnsense/www/css/dashboard.css | 7 +++++-- .../themes/opnsense-dark/assets/stylesheets/dashboard.scss | 7 +++++-- .../www/themes/opnsense/assets/stylesheets/dashboard.scss | 7 +++++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css index d6b09d26b..f93c30547 100644 --- 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 index a779cd8b3..9c921a4ea 100644 --- 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 index ae06e5bb4..3c0a6e4d0 100644 --- 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 {