mat: styling

also improve mobile

ts/mat.ts

@@ -59,10 +59,13 @@ async function getCXPC(ticker: string, cx: string): Promise<PriceChartPoint[]> {
 
 function renderPriceChart(cx: string, dateRange: [Date, Date], maxPrice: number, maxTraded: number, cxpc: PriceChartPoint[]):
 		SVGSVGElement | HTMLElement {
+	const chartsWidth = charts.getBoundingClientRect().width;
 	return Plot.plot({
 		grid: true,
-		width: charts.getBoundingClientRect().width / 2 - 10,
+		width: chartsWidth < 600 ? chartsWidth : chartsWidth / 2 - 10,
 		height: 400,
+		marginLeft: 12 + 7 * Math.log10(maxPrice),
+		marginRight: 12 + 7 * Math.log10(maxTraded),
 		x: {domain: dateRange},
 		y: {axis: 'left', label: cx, domain: [0, maxPrice * 1.1]},
 		marks: [

www/style.css

@@ -10,6 +10,7 @@
 }
 
 body {
+	margin: 0;
 	background-color: #000;
 	color: #aaa;
 	font: 18px Metrophobic, sans-serif;
@@ -106,8 +107,16 @@ main.buy {
 
 main.mat {
 	width: 90%;
-	#charts > svg {
-		display: inline-block;
+	min-width: 500px;
+	#charts {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		row-gap: 2em;
+		margin-top: 2em;
+		svg {
+			display: inline-block;
+		}
 	}
 }
 
@@ -170,3 +179,9 @@ main.mat {
 	border: none;
 	opacity: 0.9;
 }
+
+@media (max-width: 600px) {
+	main {
+		padding: 5px;
+	}
+}