fix charts clipped on small devices (#385)

* fix clipping of charts on small devices (eg iPhone)

* Rebuild web UI

---------

Co-authored-by: mgdigital <mgdigital@users.noreply.github.com>
Co-authored-by: Mike Gibson <mike@mgdigital.co.uk>

webui/src/app/charting/chart.component.html

@@ -16,15 +16,21 @@
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <canvas
-        baseChart
-        [data]="chartConfig.data"
-        [options]="chartConfig.options"
-        [type]="chartConfig.type"
-        [height]="height"
-        [width]="width"
+      <div
+        [class]="
+          breakpoints.sizeAtLeast('Large') ? 'app-chart' : 'app-chart-small'
+        "
       >
-      </canvas>
+        <canvas
+          baseChart
+          [data]="chartConfig.data"
+          [options]="chartConfig.options"
+          [type]="chartConfig.type"
+          [height]="height"
+          [width]="width"
+        >
+        </canvas>
+      </div>
     </mat-card-content>
   </mat-card>
 </ng-container>

webui/src/app/charting/chart.component.scss

@@ -8,3 +8,12 @@
     opacity: 1;
   }
 }
+
+.app-chart {
+  position: relative;
+}
+
+.app-chart-small {
+  position: relative;
+  width: calc(40vw + 100px);
+}

webui/src/app/charting/chart.component.ts

@@ -12,6 +12,7 @@ import {
 import { MatIcon } from "@angular/material/icon";
 import { MatTooltip } from "@angular/material/tooltip";
 import { ThemeInfoService } from "../themes/theme-info.service";
+import { BreakpointsService } from "../layout/breakpoints.service";
 import { ChartAdapter } from "./types";
 
 @Component({
@@ -35,6 +36,7 @@ export class ChartComponent<Data = unknown, Type extends ChartType = ChartType>
 {
   private themeInfo = inject(ThemeInfoService);
   private transloco = inject(TranslocoService);
+  breakpoints = inject(BreakpointsService);
 
   @Input() title: string;
   @Input() $data: Observable<Data> = new Observable();