sneak/netwatch
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix host row layout: use CSS grid to prevent stats overflow

Browse Source 
Replace absolute positioning with a 2-column CSS grid so the stats
line (col-span-2, text-right) is contained within the 480px block
and cannot extend past the left edge of the row.
This commit is contained in:
Jeffrey Paul
2026-02-26 19:03:45 +07:00
parent db983fb340
commit 85058a336a
1 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/main.js
View File

@@ -553,20 +553,16 @@ function hostRowHTML(host, index, showPin = true) {
<div class="host-row bg-gray-800/50 rounded-lg p-2 border border-gray-700/50" data-index="${index}"> <div class="host-row bg-gray-800/50 rounded-lg p-2 border border-gray-700/50" data-index="${index}">
<div class="flex items-center gap-4 min-w-0"> <div class="flex items-center gap-4 min-w-0">
${pinBtn} ${pinBtn}
<div class="w-[480px] flex-shrink relative min-w-0"> <div class="w-[480px] flex-shrink min-w-0 grid grid-cols-[1fr_auto] items-baseline">
<div class="max-w-[55%] pb-5"> <div class="flex items-center gap-2 min-w-0">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: ${latencyHex(null)}"></div> <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> <span class="font-medium text-white truncate">${host.name}</span>
</div> </div>
<a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block">${host.url}</a> <div class="latency-value text-4xl font-bold tabular-nums text-right" data-host="${index}">
</div>
<div class="absolute top-0 right-0 text-right">
<div class="latency-value text-4xl font-bold tabular-nums" data-host="${index}">
<span class="text-gray-500">---</span> <span class="text-gray-500">---</span>
</div> </div>
<div class="status-text text-xs text-gray-500 whitespace-nowrap mt-1 pl-8" data-host="${index}">waiting...</div> <a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block col-span-2">${host.url}</a>
</div> <div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2" data-host="${index}">waiting...</div>
</div> </div>
<div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30"> <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> <canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>