Fixed up sensor cards

client/src/components/Seismic.vue

@@ -9,16 +9,29 @@ const W = 320, H = 60, MAX_PTS = 120;
 let interval: ReturnType<typeof setInterval>;
 
 function toPath(pts: number[]) {
-	if(!pts.length) return '';
+	if (!pts.length) return '';
 	const mid = H / 2, amp = H / 2 - 4;
-	const max = Math.max(...pts) || 1;
-	return pts.map((v, i) => {
-		const x = (i / (MAX_PTS - 1)) * W;
-		const normalized = v / max;
-		const flipped = i % 2 === 0 ? normalized : -normalized;
-		const y = mid - flipped * amp;
-		return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
-	}).join(' ');
+	const max = Math.max(Math.max(...pts), 1.0); // 1.0 = min scale floor
+
+	// Fixed px per point — path grows left→right, never stretches
+	const segW = W / (MAX_PTS - 1);
+
+	const subPts: { x: number; y: number }[] = [];
+
+	pts.forEach((v, i) => {
+		const norm = (v / max) * amp;
+		const baseX = i * segW;
+		const s = segW / 4;
+
+		subPts.push({ x: baseX,         y: mid - norm * 0.5 });
+		subPts.push({ x: baseX + s,     y: mid - norm });
+		subPts.push({ x: baseX + s * 2, y: mid + norm });
+		subPts.push({ x: baseX + s * 3, y: mid });
+	});
+
+	return subPts.map((p, i) =>
+		`${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`
+	).join(' ');
 }
 
 async function poll() {
@@ -39,7 +52,7 @@ svg { width: 100%; height: 60px; overflow: visible; }
 	<div class="card" v-if="d">
 		<div class="card-title">🫨 Seismic</div>
 
-		<MetricRow label="Magnitude" :value="d.magnitude?.toFixed(4)" metric-key="magnitude" :data="d" />
+		<MetricRow label="Magnitude" :value="d.magnitude?.toFixed(1)" metric-key="magnitude" :data="d" />
 
 		<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
 			<line :x1="0" :y1="H/2" :x2="W" :y2="H/2" stroke="var(--border)" stroke-width="1" />