From 96b836b660a78a1c946480b279c9e1b702095c6a Mon Sep 17 00:00:00 2001
From: Ben Goldsworthy <admin@bengoldsworthy.net>
Date: Sat, 11 Jan 2025 16:18:22 +0100
Subject: [PATCH] fix: increase chart size

---
 assets/css/components/_chart.scss | 35 ++++++++++----------
 layouts/shortcodes/chart.html     | 53 +++++++++++++++++++------------
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/assets/css/components/_chart.scss b/assets/css/components/_chart.scss
index f6af610..2137a19 100644
--- a/assets/css/components/_chart.scss
+++ b/assets/css/components/_chart.scss
@@ -1,22 +1,23 @@
 .chart-container {
-    position: relative;
-    margin-inline: auto;
-    block-size: 50vh;
+  position: relative;
+  margin-inline: auto;
+  block-size: 100vh;
+  inline-size: 95vw;
+  display: flex;
+  justify-content: center;
+
+  @media (orientation: landscape) {
+    block-size: 75vh;
     inline-size: 95vw;
-    display: flex;
-    justify-content: center;
+  }
 
-    @media (orientation: landscape) {
-        block-size: 75vh;
-        inline-size: 95vw;
-    }
+  @include mq("large") {
+    block-size: auto;
+    max-block-size: 80vh;
+    inline-size: 50vw;
+  }
 
-    @include mq("large") {
-        block-size: 50vh;
-        inline-size: 50vw;
-    }
-
-    & + .chart-container {
-        margin-block-start: 1em;
-    }
+  & + .chart-container {
+    margin-block-start: 1em;
+  }
 }
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html
index e8f40d0..970729b 100644
--- a/layouts/shortcodes/chart.html
+++ b/layouts/shortcodes/chart.html
@@ -2,26 +2,37 @@
   {{- erroridf "a11y-chart-longdesc" "No longdesc found for chart '%q' (%q)" ( .Get "chart-id" ) .Page.File.Path -}}
 {{- end -}}
 
-<figure class="article__figure figure figure--chart{{ with .Get "class" }} {{ . }}{{ end }}" role="group">
-    {{- with .Get "chart-id" -}}
-      <div class="chart-container">
-        <canvas class="chart" id="{{ . }}">
-        You must enable Javascript to view this chart.
-        </canvas>
-      </div>
-    {{- end -}}
-    {{- with .Get "chart-id-2" -}}
-      <div class="chart-container">
-        <canvas class="chart" id="{{ . }}">
-        You must enable Javascript to view this chart.
-        </canvas>
-      </div>
-    {{- end -}}
 
-    {{- if or ( .Get "caption" ) ( .Get "title" ) -}}
-      <figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }} figure__caption--no-height{{ end }}">
-          {{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
-          {{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}}
-      </figcaption>
-    {{- end -}}
+<figure
+  class="article__figure figure figure--chart{{ with .Get "class" }}{{ . }}{{ end }}"
+  role="group"
+>
+  {{- with .Get "chart-id" -}}
+    <div class="chart-container">
+      <canvas
+        width="auto"
+        class="chart"
+        id="{{ . }}"
+      >
+        You must enable Javascript to view this chart.
+      </canvas>
+    </div>
+  {{- end -}}
+  {{- with .Get "chart-id-2" -}}
+    <div class="chart-container">
+      <canvas
+        class="chart"
+        id="{{ . }}"
+      >
+        You must enable Javascript to view this chart.
+      </canvas>
+    </div>
+  {{- end -}}
+
+  {{- if or ( .Get "caption" ) ( .Get "title" ) -}}
+    <figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }}figure__caption--no-height{{ end }}">
+      {{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
+      {{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}}
+    </figcaption>
+  {{- end -}}
 </figure>