From 87ce71501132adc7cc3d139cb24807cf07d96299 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 14 Jun 2023 22:23:22 +0000
Subject: [PATCH] This appears to let me shrink the sparkline graphs.  Freaking
 CSS.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4323 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/core/client.js b/core/client.js
index a9ce7e64..003b4c6f 100644
--- a/core/client.js
+++ b/core/client.js
@@ -79,6 +79,9 @@ class TfNavigationElement extends LitElement {
 	get_spark_line(key, options) {
 		if (!this.spark_lines[key]) {
 			let spark_line = document.createElement('tf-sparkline');
+			spark_line.style.display = 'flex';
+			spark_line.style.flexDirection = 'row';
+			spark_line.style.flex = '0 100 10em';
 			spark_line.title = key;
 			if (options) {
 				if (options.max) {
@@ -133,7 +136,7 @@ class TfNavigationElement extends LitElement {
 				<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
 				<span id="requests"></span>
 				${this.render_permissions()}
-				<span style="flex: 1; white-space: nowrap; overflow: hidden; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span>
+				<span style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0">${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])}</span>
 				<span style="flex: 0 0; white-space: nowrap">${this.render_login()}</span>
 			</div>
 		`;
@@ -315,7 +318,7 @@ class TfSparkLineElement extends LitElement {
 	render() {
 		let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0;
 		return html`
-			<svg style="width: 10em; height: 1.4em; vertical-align: top; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+			<svg style="width-auto: object-fit: cover; margin: 0; padding: 0; background: #000" viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
 				${this.lines.map(x => this.render_line(x))}
 				<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">${max}</text>
 			</svg>