feat: add mobile viewport detection with friendly unavailable message

Detect mobile viewport (window.innerWidth < 768) at startup and show a
centered 'Not yet available on mobile' message instead of the full
monitoring UI. All polling, gateway detection, and network requests are
skipped entirely on mobile viewports.

Desktop behavior is completely unchanged — the mobile check is the very
first thing in init() and returns early before any other setup runs.

README.md

@@ -102,6 +102,9 @@ 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
@@ -125,6 +128,8 @@ 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.

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="host-row-inner flex items-center gap-4 min-w-0">
+      <div class="flex items-center gap-4 min-w-0">
         ${pinBtn}
-        <div class="host-info-panel w-[420px] flex-shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center">
+        <div class="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="header-top flex items-center justify-between mb-4">
+        <div class="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="header-controls flex flex-col items-end gap-2">
+          <div class="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,11 +1126,46 @@ 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];

src/styles.css

@@ -22,53 +22,95 @@ body {
     );
 }
 
-/* Mobile-responsive host rows */
+/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
 @media (max-width: 768px) {
-    .host-row-inner {
+    /* Header: stack title and controls vertically */
-        flex-direction: column !important;
+    header .flex.items-center.justify-between {
-        align-items: stretch !important;
+        flex-direction: column;
-        gap: 0.5rem !important;
+        align-items: flex-start !important;
+        gap: 1rem;
     }
 
-    .host-row-inner .pin-btn {
+    header .flex.flex-col.items-end {
-        align-self: flex-end;
+        align-items: flex-start !important;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.75rem;
     }
 
-    .host-info-panel {
+    /* Pause button: smaller on mobile */
-        width: 100% !important;
+    #pause-btn {
+        padding: 0.5rem 1rem;
     }
 
-    .host-row .sparkline-container {
+    #pause-btn svg {
-        width: 100% !important;
+        width: 1.25rem;
-        flex-shrink: 0;
+        height: 1.25rem;
     }
 
-    /* Summary line: allow wrapping */
+    #pause-text {
+        font-size: 0.875rem;
+    }
+
+    /* Summary box: wrap into a grid for readability */
     #summary {
-        display: flex !important;
+        display: flex;
-        flex-wrap: wrap !important;
+        flex-wrap: wrap;
-        gap: 0.25rem 0.5rem !important;
+        gap: 0.25rem 0.5rem;
-        justify-content: center !important;
+        justify-content: center;
+        line-height: 1.6;
     }
 
+    /* Hide the pipe separators on mobile */
     #summary .text-gray-600.mx-3 {
         display: none;
     }
 
-    /* Header: stack controls below title */
+    /* Host row: stack vertically */
-    .header-top {
+    .host-row .flex.items-center.gap-4 {
-        flex-direction: column !important;
+        flex-direction: column;
-        align-items: flex-start !important;
+        align-items: stretch !important;
-        gap: 1rem !important;
+        gap: 0.5rem;
     }
 
-    .header-controls {
+    /* Info section: full width, remove fixed width */
-        align-items: flex-start !important;
+    .host-row .w-\[420px\] {
-        width: 100%;
+        width: 100% !important;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
     }
 
-    #pause-btn {
+    /* 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 {
         width: 100%;
-        justify-content: center;
+        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;
     }
 }