feat: responsive mobile layout for host rows (closes #2 )

Redesign host rows for portrait/mobile viewports (<=768px): - Host info panel stacks on top, full width - Sparkline renders full width below - Each host row becomes taller to accommodate vertical layout - Summary line wraps gracefully - Header controls stack below title Desktop layout is unchanged — all changes are inside a media query.
2026-02-27 02:01:14 -08:00
3 changed files with 31 additions and 113 deletions
--- a/README.md
+++ b/README.md
@@ -102,9 +102,6 @@ dist/
  false outage)
 - Clickable service URLs
 - Canvas-based sparkline rendering with devicePixelRatio scaling
- Mobile detection: viewports narrower than 768px show a friendly "not yet
-  available on mobile" message instead of the monitoring UI (no polling or
-  network requests on mobile)
 - Zero runtime dependencies: all resources bundled into build artifacts

 ## Deployment
@@ -128,8 +125,6 @@ properties.

 ## Limitations

- **Mobile**: Viewports below 768px wide show a static "not yet available"
-  message. The full monitoring UI requires a desktop-width browser.
 - **CORS**: Some hosts may block cross-origin HEAD requests. The app uses
  `no-cors` mode which allows the request but provides opaque responses. Latency
  is still measurable based on request timing.
--- a/src/main.js
+++ b/src/main.js
@@ -551,9 +551,9 @@ function hostRowHTML(host, index, showPin = true) {
        : `<div class="flex-shrink-0 w-4 h-4"></div>`;
    return `
    <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="host-row-inner flex items-center gap-4 min-w-0">
        ${pinBtn}
-        <div class="w-[420px] flex-shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center">
+        <div class="host-info-panel w-[420px] flex-shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center">
          <div class="flex items-center gap-2 min-w-[200px]">
            <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>
@@ -589,9 +589,9 @@ function buildUI(state) {
    app.innerHTML = `
    <div class="mx-auto px-[5%] py-8">
      <header class="mb-8">
-        <div class="flex items-center justify-between mb-4">
+        <div class="header-top flex items-center justify-between mb-4">
          <h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
-          <div class="flex flex-col items-end gap-2">
+          <div class="header-controls flex flex-col items-end gap-2">
            <button id="pause-btn"
              class="flex items-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
              <svg id="pause-icon" class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
@@ -1126,46 +1126,11 @@ function handleResize(state) {
    });
 }

-// --- Mobile Detection --------------------------------------------------------
-
-const MOBILE_BREAKPOINT = 768;
-
-function isMobileViewport() {
-    return window.innerWidth < MOBILE_BREAKPOINT;
-}
-
-function buildMobileUI() {
-    const app = document.getElementById("app");
-    app.innerHTML = `
-    <div class="mx-auto px-[5%] py-8">
-      <header class="mb-8">
-        <h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
-        <p class="text-gray-400 text-sm mt-2">Real-time network latency monitor</p>
-      </header>
-      <div class="flex items-center justify-center min-h-[60vh]">
-        <div class="bg-gray-800/70 border border-gray-700/50 rounded-lg p-8 max-w-md text-center">
-          <p class="text-4xl mb-4">📡</p>
-          <p class="text-xl font-semibold text-white mb-2">Not yet available on mobile</p>
-          <p class="text-gray-400 text-sm">NetWatch requires a wider viewport to display latency charts and monitoring data. Please visit on a desktop browser.</p>
-        </div>
-      </div>
-      <footer class="mt-8 text-center text-gray-600 text-xs">
-        <p><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
-      </footer>
-    </div>`;
-}
-
 // --- Bootstrap ---------------------------------------------------------------

 async function init() {
    log.info("NetWatch starting");

-    if (isMobileViewport()) {
-        log.info("Mobile viewport detected — skipping monitoring");
-        buildMobileUI();
-        return;
-    }
-
    // Probe common gateway IPs to find the local router
    const gateway = await detectGateway();
    const localHosts = [LOCAL_CPE];
--- a/src/styles.css
+++ b/src/styles.css
@@ -22,95 +22,53 @@ body {
    );
 }

-/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
+/* Mobile-responsive host rows */
@media (max-width: 768px) {
-    /* Header: stack title and controls vertically */
-    header .flex.items-center.justify-between {
-        flex-direction: column;
-        align-items: flex-start !important;
-        gap: 1rem;
+    .host-row-inner {
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 0.5rem !important;
    }

-    header .flex.flex-col.items-end {
-        align-items: flex-start !important;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 0.75rem;
+    .host-row-inner .pin-btn {
+        align-self: flex-end;
    }

-    /* Pause button: smaller on mobile */
-    #pause-btn {
-        padding: 0.5rem 1rem;
+    .host-info-panel {
+        width: 100% !important;
    }

-    #pause-btn svg {
-        width: 1.25rem;
-        height: 1.25rem;
+    .host-row .sparkline-container {
+        width: 100% !important;
+        flex-shrink: 0;
    }

-    #pause-text {
-        font-size: 0.875rem;
-    }
-
-    /* Summary box: wrap into a grid for readability */
+    /* Summary line: allow wrapping */
    #summary {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.25rem 0.5rem;
-        justify-content: center;
-        line-height: 1.6;
+        display: flex !important;
+        flex-wrap: wrap !important;
+        gap: 0.25rem 0.5rem !important;
+        justify-content: center !important;
    }

-    /* Hide the pipe separators on mobile */
    #summary .text-gray-600.mx-3 {
        display: none;
    }

-    /* Host row: stack vertically */
-    .host-row .flex.items-center.gap-4 {
-        flex-direction: column;
-        align-items: stretch !important;
-        gap: 0.5rem;
+    /* Header: stack controls below title */
+    .header-top {
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        gap: 1rem !important;
    }

-    /* Info section: full width, remove fixed width */
-    .host-row .w-\[420px\] {
-        width: 100% !important;
-        display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: center;
-    }
-
-    /* Host name row with dot */
-    .host-row .flex.items-center.gap-2.min-w-\[200px\] {
-        min-width: 0;
-    }
-
-    /* Latency value: slightly smaller on mobile */
-    .host-row .latency-value {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
-    }
-
-    /* Sparkline: full width below the info */
-    .host-row .sparkline-container {
+    .header-controls {
+        align-items: flex-start !important;
        width: 100%;
-        flex-shrink: 0;
    }

-    /* Pin button: inline with the host info */
-    .host-row .pin-btn {
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-    }
-
-    .host-row {
-        position: relative;
-    }
-
-    /* Footer legend: wrap nicely */
-    footer p {
-        line-height: 1.8;
+    #pause-btn {
+        width: 100%;
+        justify-content: center;
    }
 }