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

TODO.md

@@ -1,47 +0,0 @@
-# Workflow
-
-* branch (from `main`)
-* do the work in Next Step
-* move Next Step to the top of Completed Steps
-* move the top item of Future Steps into Next Step
-* commit (`TODO.md` changes in the same commit as the work)
-* merge to `main` if the branch is not protected, otherwise open a PR
-* push
-
-# Status
-
-pre-1.0. No git tags. Backend work in flight on feat/reportbuf-storage
-(dirty: src/main.js). Frontend is functional; backend is new and unmerged.
-
-# Next Step
-
-Land feat/reportbuf-storage: finish the in-progress src/main.js change,
-get make check green, and merge the branch to main. The branch adds the
-backend (buffered zstd-compressed report storage), the CI workflow, and
-backend repo standard files, so merging it also closes most compliance
-gaps.
-
-# Completed Steps
-
-- 2026-02-27: backend with buffered zstd-compressed report storage; CI
-  workflow and backend repo standard files; backend Dockerfile fixed (Go
-  1.25, golangci-lint) and moved to repo root (feat/reportbuf-storage,
-  unmerged)
-- 2026-02-26: host row layout redesigned with CSS grid; overflow and
-  spacing fixes; nginx config extracted; port hardcoded to 8080
-- 2026-02-26: debug log panel, median stats, recovery probe, Docker
-  build fix, S3 Singapore endpoint added
-- 2026-02-23: summary box redesign, host pinning, local and UTC clocks,
-  checks counter
-- 2026-02-23: hosts sorted by latency; GET instead of HEAD for latency;
-  timeout derived from interval; Hetzner regional endpoints; 3s interval
-- 2026-01-29: initial NetWatch network latency monitor
-
-# Future Steps
-
-- Compliance top-up as one small commit: add .editorconfig and add the
-  hooks target to the Makefile
-- After merge, confirm .gitea/workflows/check.yml is on main and CI is
-  green (main always green policy)
-- Decide what to do with untracked resume.sh: commit it, gitignore it,
-  or delete it

src/main.js

@@ -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,96 +21,3 @@ body {
         rgba(255, 255, 255, 0) 100%
     );
 }
-
-/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
-@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;
-    }
-
-    header .flex.flex-col.items-end {
-        align-items: flex-start !important;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 0.75rem;
-    }
-
-    /* Pause button: smaller on mobile */
-    #pause-btn {
-        padding: 0.5rem 1rem;
-    }
-
-    #pause-btn svg {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-
-    #pause-text {
-        font-size: 0.875rem;
-    }
-
-    /* Summary box: wrap into a grid for readability */
-    #summary {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.25rem 0.5rem;
-        justify-content: center;
-        line-height: 1.6;
-    }
-
-    /* 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;
-    }
-
-    /* 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 {
-        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;
-    }
-}