feat: improve target table layout and styling for better readability

Author: decoded-cipher

web/index.html

@@ -176,38 +176,31 @@
 
       .target-table {
         width: 100%; border-collapse: collapse; font-size: 0.8125rem;
-        table-layout: fixed;
+        table-layout: auto;
       }
-      .target-table col.col-host    { width: auto; }
-      .target-table col.col-latency { width: 72px; }
-      .target-table col.col-loss    { width: 52px; }
       .target-table th {
         text-align: left; font-size: 0.6875rem; font-weight: 600;
         text-transform: uppercase; letter-spacing: 0.05em;
-        color: var(--muted); padding: 0.5rem 0.625rem;
-        border-bottom: 1px solid var(--border);
-        white-space: nowrap; overflow: hidden;
+        color: var(--muted); padding: 0.4rem 0.5rem;
+        border-bottom: 1px solid var(--border); white-space: nowrap;
       }
       .target-table th:not(:first-child) { text-align: right; }
       .target-table td {
-        padding: 0.5rem 0.625rem;
+        padding: 0.45rem 0.5rem;
         border-bottom: 1px solid var(--border);
-        color: var(--fg); overflow: hidden;
+        color: var(--fg);
       }
-      .target-table td:not(:first-child) { text-align: right; white-space: nowrap; }
+      /* Number columns: shrink to content, never wrap */
+      .target-table td:not(:first-child),
+      .target-table th:not(:first-child) { width: 1%; white-space: nowrap; text-align: right; }
       .target-table tr:last-child td { border-bottom: none; }
       .target-table tr:nth-child(even) td { background: var(--table-stripe); }
       .target-table .host-cell {
-        font-weight: 600; display: flex; align-items: center; gap: 0.5rem;
-        overflow: hidden;
-      }
-      .target-table .host-cell span:last-child {
-        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        font-weight: 600; display: flex; align-items: center; gap: 0.4rem;
       }
       .target-table .ip-cell {
         font-family: 'SF Mono', 'Fira Code', monospace;
         font-size: 0.6875rem; color: var(--muted);
-        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       }
       .inline-dot {
         width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
@@ -531,7 +524,7 @@ <h2 id="modalTitle">
       </div>
 
       <!-- Main grid -->
-      <div class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-4 min-h-0 pb-4 lg:pb-0">
+      <div class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4 min-h-0 pb-4 lg:pb-0">
 
         <!-- Left column: metrics + charts -->
         <div class="flex flex-col gap-4 min-h-0">
@@ -616,11 +609,6 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
             </div>
             <div class="overflow-y-auto flex-1">
               <table class="target-table" id="targetTable">
-                <colgroup>
-                  <col class="col-host" />
-                  <col class="col-latency" />
-                  <col class="col-loss" />
-                </colgroup>
                 <thead>
                   <tr>
                     <th>Host</th>
@@ -640,10 +628,6 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
               DNS Lookups
             </div>
             <table class="target-table" id="dnsTable">
-              <colgroup>
-                <col class="col-host" />
-                <col class="col-latency" />
-              </colgroup>
               <thead>
                 <tr>
                   <th>Host</th>
@@ -656,32 +640,33 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
 
           <!-- Quick stats footer -->
           <div class="card p-3 flex-shrink-0">
-            <div class="section-label mb-2">
+            <div class="section-label mb-3">
               <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
               24h Summary
             </div>
-            <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-xs">
-              <div class="flex justify-between">
+            <div class="flex flex-col gap-1.5 text-xs">
+              <div class="flex justify-between items-center">
                 <span style="color:var(--muted)">Uptime</span>
                 <span class="font-bold" id="qs-uptime">—</span>
               </div>
-              <div class="flex justify-between">
+              <div class="flex justify-between items-center">
                 <span style="color:var(--muted)">Outages</span>
                 <span class="font-bold" id="qs-outages">—</span>
               </div>
-              <div class="flex justify-between">
-                <span style="color:var(--muted)">Peak DL</span>
+              <div style="height:1px;background:var(--border);margin:0.25rem 0"></div>
+              <div class="flex justify-between items-center">
+                <span style="color:var(--muted)">Peak Download</span>
                 <span class="font-bold" id="qs-peak-dl">—</span>
               </div>
-              <div class="flex justify-between">
+              <div class="flex justify-between items-center">
                 <span style="color:var(--muted)">Min Latency</span>
                 <span class="font-bold" id="qs-min-lat">—</span>
               </div>
-              <div class="flex justify-between">
+              <div class="flex justify-between items-center">
                 <span style="color:var(--muted)">Max Latency</span>
                 <span class="font-bold" id="qs-max-lat">—</span>
               </div>
-              <div class="flex justify-between">
+              <div class="flex justify-between items-center">
                 <span style="color:var(--muted)">Avg Jitter</span>
                 <span class="font-bold" id="qs-jitter">—</span>
               </div>
@@ -741,9 +726,10 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
 
         lastUpdateTime = Date.now();
 
-        // Filter to current config only
+        // Filter to current config only — gateway is excluded from the table
+        // (it's a local router probe, not an internet connectivity target)
         if (cfg) {
-          const allowedPing = new Set([...cfg.ping_targets.map(h => h.toLowerCase()), "gateway"]);
+          const allowedPing = new Set(cfg.ping_targets.map(h => h.toLowerCase()));
           data.targets = (data.targets || []).filter(t => allowedPing.has(t.host.toLowerCase()));
           const allowedDns = new Set(cfg.dns_targets.map(h => h.toLowerCase()));
           data.dns = (data.dns || []).filter(d => allowedDns.has(d.host.toLowerCase()));