dashboard: traffic graph should be relatively positioned to prevent automatic height scaling, which subsequently cannot be adjusted anymore due to widget height constraints

src/opnsense/www/css/dashboard.css

@@ -75,6 +75,10 @@ td {
 }
 
 .canvas-container {
+    position: relative;
+}
+
+.cpu-canvas-container {
     display: flex;
     flex-direction: column;
 }

src/opnsense/www/js/opnsense_widget_manager.js

@@ -352,7 +352,6 @@ class WidgetManager  {
         await onWidgetTick();
         const interval = setInterval(async () => {
             await onWidgetTick().catch((error) => {
-                console.log('caught');
                 // The page might be closed while a tick routine was executing,
                 // in that case, the error is expected and can be ignored.
                 null;

src/opnsense/www/js/widgets/Cpu.js

@@ -64,7 +64,7 @@ export default class Cpu extends BaseWidget {
     getMarkup() {
         let $container = $(`
         <div class="cpu-type"></div>
-        <div class="canvas-container">
+        <div class="cpu-canvas-container">
             <div class="smoothie-container">
                 <b>${this.translations.total}</b>
                 <div><canvas id="cpu-usage" style="width: 80%; height: 50px;"></canvas></div>
@@ -124,9 +124,9 @@ export default class Cpu extends BaseWidget {
         let curWidth = document.getElementById('cpu-usage').getBoundingClientRect().width;
         let viewPort = document.getElementsByClassName('page-content-main')[0].getBoundingClientRect().width;
         if (width > (viewPort / 2)) {
-            $('.canvas-container').css('flex-direction', 'row');
+            $('.cpu-canvas-container').css('flex-direction', 'row');
         } else {
-            $('.canvas-container').css('flex-direction', 'column');
+            $('.cpu-canvas-container').css('flex-direction', 'column');
         }
 
         return true;

src/opnsense/www/js/widgets/Traffic.js

@@ -44,7 +44,7 @@ export default class Traffic extends BaseWidget {
 
     getMarkup() {
         return $(`
-            <div class="traffic-chart-container">
+            <div class="traffic-charts-container">
                 <h3>${this.translations.trafficin}</h3>
                 <div class="canvas-container">
                     <canvas id="traffic-in"></canvas>