feat: add mobile detection with friendly unsupported message

Detect mobile viewport (innerWidth < 768) at init and show a centered
'Not yet available on mobile.' box instead of starting the full monitor.
No polling, no host rows, no sparklines on mobile.

Desktop behavior is completely unchanged.

Ref #2, ref #4

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">
@@ -1131,6 +1131,25 @@ function handleResize(state) {
 async function init() {
     log.info("NetWatch starting");
 
+    // Mobile detection — show a friendly message and bail out early
+    if (window.innerWidth < 768) {
+        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 mt-2">Real-time network connectivity monitor</p>
+          </header>
+          <div style="display:flex;align-items:center;justify-content:center;min-height:50vh;">
+            <div style="background:#1f2937;border:1px solid #374151;border-radius:12px;padding:2rem 1.5rem;text-align:center;max-width:90vw;">
+              <p style="font-size:1.25rem;color:#e5e7eb;margin:0;">Not yet available on mobile.</p>
+            </div>
+          </div>
+        </div>`;
+        log.info("Mobile viewport detected — skipping monitor startup");
+        return;
+    }
+
     // Probe common gateway IPs to find the local router
     const gateway = await detectGateway();
     const localHosts = [LOCAL_CPE];

src/styles.css

@@ -21,54 +21,3 @@ body {
         rgba(255, 255, 255, 0) 100%
     );
 }
-
-/* Mobile-responsive host rows */
-@media (max-width: 768px) {
-    .host-row-inner {
-        flex-direction: column !important;
-        align-items: stretch !important;
-        gap: 0.5rem !important;
-    }
-
-    .host-row-inner .pin-btn {
-        align-self: flex-end;
-    }
-
-    .host-info-panel {
-        width: 100% !important;
-    }
-
-    .host-row .sparkline-container {
-        width: 100% !important;
-        flex-shrink: 0;
-    }
-
-    /* Summary line: allow wrapping */
-    #summary {
-        display: flex !important;
-        flex-wrap: wrap !important;
-        gap: 0.25rem 0.5rem !important;
-        justify-content: center !important;
-    }
-
-    #summary .text-gray-600.mx-3 {
-        display: none;
-    }
-
-    /* Header: stack controls below title */
-    .header-top {
-        flex-direction: column !important;
-        align-items: flex-start !important;
-        gap: 1rem !important;
-    }
-
-    .header-controls {
-        align-items: flex-start !important;
-        width: 100%;
-    }
-
-    #pause-btn {
-        width: 100%;
-        justify-content: center;
-    }
-}