Move latency figure and stats line down in host row

This commit is contained in:
2026-02-26 19:14:16 +07:00
parent c875793314
commit 4ad98d578b

View File

@@ -558,11 +558,11 @@ function hostRowHTML(host, index, showPin = true) {
<div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: ${latencyHex(null)}"></div>
<span class="font-medium text-white truncate">${host.name}</span>
</div>
<div class="latency-value text-4xl font-bold tabular-nums text-right mt-1" data-host="${index}">
<div class="latency-value text-4xl font-bold tabular-nums text-right mt-3" data-host="${index}">
<span class="text-gray-500">---</span>
</div>
<a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block col-span-2 -mt-2">${host.url}</a>
<div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-3" data-host="${index}">waiting...</div>
<div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5" data-host="${index}">waiting...</div>
</div>
<div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
<canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>
@@ -721,19 +721,19 @@ function updateHostRow(host, index) {
` <span class="text-gray-500">/</span> ` +
`<span class="text-gray-400">max </span><span class="${latencyClass(max, "online")}">${max}ms</span>`;
statusEl.className =
"status-text text-xs whitespace-nowrap text-right col-span-2 mt-3";
"status-text text-xs whitespace-nowrap text-right col-span-2 mt-5";
} else if (host.status === "offline") {
statusEl.textContent = "unreachable";
statusEl.className =
"status-text text-xs text-red-400 whitespace-nowrap text-right col-span-2 mt-3";
"status-text text-xs text-red-400 whitespace-nowrap text-right col-span-2 mt-5";
} else if (host.status === "error") {
statusEl.textContent = "timeout";
statusEl.className =
"status-text text-xs text-orange-400 whitespace-nowrap text-right col-span-2 mt-3";
"status-text text-xs text-orange-400 whitespace-nowrap text-right col-span-2 mt-5";
} else {
statusEl.textContent = "connecting...";
statusEl.className =
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-3";
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
}
SparklineRenderer.draw(canvas, host.history);
@@ -1045,7 +1045,7 @@ function greyOutUI(state) {
if (statusEl) {
statusEl.textContent = "paused";
statusEl.className =
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-3";
"status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
}
// Grey out the status dot
const row = document.querySelector(`.host-row[data-index="${i}"]`);