From 1e90b5f3c29b35b115614e567a4026e75702d669 Mon Sep 17 00:00:00 2001
From: M1 <m1-pro@M1s-MacBook-Pro.local>
Date: Tue, 17 Mar 2026 07:30:28 +0400
Subject: [PATCH] fix: move min/max labels out of SVG into HTML overlays, no
 more text stretch

---
 apps/web/src/routes/dashboard.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/routes/dashboard.ts b/apps/web/src/routes/dashboard.ts
index 1fd5779..cec7f3d 100644
--- a/apps/web/src/routes/dashboard.ts
+++ b/apps/web/src/routes/dashboard.ts
@@ -39,14 +39,16 @@ function latencyChartSSR(pings: any[]): string {
   const dots = points.map((p: number[], i: number) =>
     !ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : ''
   ).join('');
-  return `<svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none">
-    <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs>
-    <path d="${areaD}" fill="url(#areaGrad)"/>
-    <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    ${dots}
-    <text x="4" y="12" fill="#6b7280" font-size="10">${max}ms</text>
-    <text x="4" y="${h - 2}" fill="#6b7280" font-size="10">${min}ms</text>
-  </svg>`;
+  return `<div class="relative w-full h-full">
+    <svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none">
+      <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs>
+      <path d="${areaD}" fill="url(#areaGrad)"/>
+      <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      ${dots}
+    </svg>
+    <span class="absolute top-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${max}ms</span>
+    <span class="absolute bottom-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${min}ms</span>
+  </div>`;
 }
 
 function escapeHtmlSSR(str: string): string {