add alternate chart layout for narrow screens

account.html

@@ -16,23 +16,23 @@
 				#resource-container {
 					display: grid;
 					grid-template-columns: repeat(auto-fill, calc(100% / 6));
-					grid-gap: 0px;
+					grid-gap: 0;
 					justify-content: space-between;
 				}
 			}
-			@media screen and (width <= 1264px) and (width >= 480px) {
+			@media screen and (width <= 1264px) and (width >= 680px) {
 				#resource-container {
 					display: grid;
 					grid-template-columns: repeat(auto-fill, 200px);
-					grid-gap: 0px;
+					grid-gap: 0;
 					justify-content: space-between;
 				}
 			}
-			@media screen and (width <= 480px) {
+			@media screen and (width <= 680px) {
 				#resource-container {
 					display: flex;
 					flex-direction: column;
-					gap: 0px;
+					gap: 0;
 					flex-wrap: nowrap;
 					justify-content: center;
 				}

scripts/account.js

@@ -98,6 +98,8 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
 		},
 		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
 	};
+	chart.style = "margin: 10px;";
+	chart.responsive = "680px";
 }
 
 function parseNumber (value, unitData) {

scripts/chart.js

@@ -1,31 +1,90 @@
 class CustomChart extends HTMLElement {
-	constructor (data) {
+	constructor () {
 		super();
 		this.attachShadow({ mode: "open" });
 		this.shadowRoot.innerHTML = `
             <style>
+				* {
+					box-sizing: border-box;
+					font-family: monospace;
+				}
+				figure {
+					margin: 0;
+				}
                 div {
-					min-width: 200px;
 					max-width: 400px;
 					aspect-ratio: 1 / 1;
                 }
+				figcaption {
+					text-align: center;
+					margin-top: 10px;
+					display: flex;
+					flex-direction: column;
+				}
             </style>
-            <div>
+			<style id="responsive-style" media="not all">
-                <canvas>
+				figure {
-            </div>
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+					flex-wrap: nowrap;
+					justify-content: flex-start;
+				}
+				div {
+					max-height: 1lh;
+				}
+				figcaption {
+					margin: 0;
+					margin-left: 10px;
+					display: flex;
+					flex-direction: row;
+					gap: 1ch;
+					font-size: small;
+				}
+			</style>
+			<figure>
+				<div>
+					<canvas>
+				</div>
+				<figcaption></figcaption>
+			</figure>
         `;
+		this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
         this.canvas = this.shadowRoot.querySelector("canvas");
+		this.caption = this.shadowRoot.querySelector("figcaption");
 	}
 
 	set data (data) {
+		if (data.chart?.options?.plugins?.title.display) {
+			data.chart.options.plugins.title.display = false;
+			for (let line of data.chart.options.plugins.title.text) {
+				this.caption.innerHTML += `<span>${line}</span>`
+			}
+		}
 		this.canvas.role = "img";
 		this.canvas.ariaLabel = data.ariaLabel;
 		createChart(this.canvas, data.chart);
+		
+		
 	}
 
 	get data () {
 		return null;
 	}
+
+	set responsive (breakpoint) {
+		this.breakpoint = breakpoint;
+		if (breakpoint) {
+			this.responsiveStyle.media = `screen and (width <= ${breakpoint})`;
+		}
+		else {
+			this.responsiveStyle.media = "not all";
+		}
+	}
+
+	get responsive () {
+		return this.breakpoint;
+	}
 }
 
 function createChart (ctx, data) {