fix: SVG h-full so it fills container exactly, no overflow or clipping

This commit is contained in:
M1 2026-03-17 07:28:57 +04:00
parent 51baf7c495
commit 5eb463a03a
2 changed files with 2 additions and 2 deletions

View File

@ -39,7 +39,7 @@ function latencyChartSSR(pings: any[]): string {
const dots = points.map((p: number[], i: number) => const dots = points.map((p: number[], i: number) =>
!ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : '' !ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : ''
).join(''); ).join('');
return `<svg viewBox="0 0 ${w} ${h}" class="w-full" preserveAspectRatio="none"> 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> <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="${areaD}" fill="url(#areaGrad)"/>
<path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

View File

@ -57,7 +57,7 @@
<!-- Latency chart --> <!-- Latency chart -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4 mb-8"> <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 mb-8">
<h3 class="text-sm text-gray-400 mb-3">Response Time</h3> <h3 class="text-sm text-gray-400 mb-3">Response Time</h3>
<div id="latency-chart" class="h-32 w-full overflow-hidden"><%~ it.latencyChartSSR(chartPings) %></div> <div id="latency-chart" class="h-32 w-full"><%~ it.latencyChartSSR(chartPings) %></div>
</div> </div>
<!-- Status bar --> <!-- Status bar -->