fix: wrap per-host status line so 320px viewport does not scroll (closes #42)

The status line carried `whitespace-nowrap`, and once populated its content
(`min 1ms / med 2ms / avg 3ms / max 4ms`) measured 325px inside the 270px host
column at a 320px viewport. The element does not clip, so the overflow
propagated to the document and the page scrolled horizontally.

Drop `whitespace-nowrap` from the status line and instead make each
label/value/separator group individually unbreakable, so wrapping happens only
between stats and a wrapped line never starts with a separator. The line fits
on one row in the 420px desktop column, so the wide layout is unchanged.

The repeated class string is now a single constant.

Dockerfile.backend

@@ -1,25 +1,50 @@
+# Lint stage — fast feedback on formatting and lint issues. The
+# golangci/golangci-lint image ships Go, gofmt, make and the linter, so
+# nothing is installed here.
+# golangci/golangci-lint:v2.7.2 (2026-08-09)
+FROM golangci/golangci-lint@sha256:5d6d5c70a61f1356adfd9dd6316ce286799fefc9d743421356ff1b00842368ba AS lint
+
+WORKDIR /src
+COPY backend/go.mod backend/go.sum ./
+RUN go mod download
+COPY backend/ .
+RUN make fmt-check
+RUN make lint
+
+# Build stage
 # golang:1.25-alpine (2026-02-27)
 FROM golang:1.25-alpine@sha256:f6751d823c26342f9506c03797d2527668d095b0a15f1862cddb4d927a7a4ced AS builder
 
-RUN apk add --no-cache git make gcc musl-dev
+RUN apk add --no-cache make
 
-# golangci-lint v2.7.2 (2026-02-27)
+WORKDIR /src
-RUN CGO_ENABLED=0 go install github.com/golangci/golangci-lint/v2/cmd/golangci-lint@9f61b0f53f80672872fced07b6874397c3ed197b
+
+# Force BuildKit to run the lint stage before proceeding. BuildKit runs
+# stages in parallel by default; without this no-op copy a lint failure
+# would not gate compilation.
+COPY --from=lint /src/go.sum /dev/null
 
-WORKDIR /repo/backend
 COPY backend/go.mod backend/go.sum ./
 RUN go mod download
-COPY .git /repo/.git
 COPY backend/ .
 
-RUN make check
+RUN make test
-RUN make build
 
+# The build is driven through the Makefile so there is exactly one
+# definition of the build command; it expands to
+# CGO_ENABLED=0 go build -trimpath -ldflags "-s -w -X main.Version=... -X main.Buildarch=..."
+# VERSION is handed over in the environment rather than as a make
+# variable so it still reaches the build if the target is ever turned
+# into a shim around a script.
+ARG VERSION=dev
+RUN VERSION="${VERSION}" make build
+
+# Runtime stage
 # alpine:3.23 (2026-02-27)
 FROM alpine:3.23@sha256:25109184c71bdad752c8312a8623239686a9a2071e8825f20acb8f2198c3f659
 
 RUN apk add --no-cache ca-certificates
-COPY --from=builder /repo/backend/netwatch-server /usr/local/bin/netwatch-server
+COPY --from=builder /src/netwatch-server /usr/local/bin/netwatch-server
 
 EXPOSE 8080
 ENTRYPOINT ["netwatch-server"]

TODO.md

@@ -22,6 +22,12 @@ files, so merging it also closes most compliance gaps.
 
 # Completed Steps
 
+- 2026-08-10: per-host status line wraps below the 768px breakpoint instead of
+  forcing horizontal page scroll at 320px
+- 2026-08-09: `Dockerfile.backend` reworked to the mandated Go multistage
+  lint-stage pattern: separate `lint` stage on the hash-pinned
+  `golangci/golangci-lint` image, `COPY --from=lint` stage dependency,
+  `CGO_ENABLED=0` static build driven by `ARG VERSION`, and no more `COPY .git`
 - 2026-08-09: dotfile compliance — lifted `backend/.editorconfig` to the repo
   root so `root = true` covers the frontend too, and replaced `.gitignore` with
   the org model (OS, editor, node, and environment/secrets sections) plus this

backend/Makefile

@@ -1,25 +1,22 @@
-UNAME_S := $(shell uname -s)
+# VERSION is overridable (the Dockerfile passes its ARG VERSION in) and
-VERSION := $(shell git describe --always --dirty)
+# degrades to "dev" when git is unavailable or there is no .git — the
+# build must not depend on the repository history being in the build
+# context.
+VERSION ?= $(shell { git describe --always --dirty; } 2>/dev/null || echo dev)
 BUILDARCH := $(shell uname -m)
 BINARY := netwatch-server
 
+GOLDFLAGS += -s -w
 GOLDFLAGS += -X main.Version=$(VERSION)
 GOLDFLAGS += -X main.Buildarch=$(BUILDARCH)
 
-ifeq ($(UNAME_S),Darwin)
-	GOFLAGS := -ldflags "$(GOLDFLAGS)"
-else
-	GOFLAGS = -ldflags "-linkmode external -extldflags -static $(GOLDFLAGS)"
-endif
-
 .PHONY: all build test lint fmt fmt-check check docker hooks run clean
 
 all: build
 
-build: ./$(BINARY)
+build:
-
+	CGO_ENABLED=0 go build -trimpath -ldflags "$(GOLDFLAGS)" \
-./$(BINARY): $(shell find . -name '*.go' -type f) go.mod go.sum
+		-o ./$(BINARY) ./cmd/netwatch-server/
-	go build -o $@ $(GOFLAGS) ./cmd/netwatch-server/
 
 test:
 	timeout 30 go test ./...

src/main.js

@@ -537,6 +537,12 @@ class SparklineRenderer {
 
 // --- UI Renderer -------------------------------------------------------------
 
+// The per-host status line must stay wrappable: its populated content is
+// wider than the host column at a 320px viewport, and `whitespace-nowrap`
+// here overflows the element and forces the whole document to scroll
+// horizontally.
+const STATUS_TEXT_CLASS = "status-text text-xs text-right col-span-2 mt-5";
+
 function hostRowHTML(host, index, showPin = true) {
     const pinColor = host.pinned
         ? "text-blue-500"
@@ -562,7 +568,7 @@ function hostRowHTML(host, index, showPin = true) {
             <span class="text-gray-500">---</span>
           </div>
           <a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block col-span-2 -mt-2">${host.url}</a>
-          <div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5" data-host="${index}">waiting...</div>
+          <div class="${STATUS_TEXT_CLASS} text-gray-500" data-host="${index}">waiting...</div>
         </div>
         <div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
           <canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>
@@ -688,6 +694,26 @@ function buildUI(state) {
 
 // --- UI Updaters -------------------------------------------------------------
 
+// Renders `min 1ms / med 2ms / avg 3ms / max 4ms`. Each label, value and
+// trailing separator is one unbreakable unit, so wrapping only ever happens
+// between stats and a wrapped line never starts with a separator.
+function statusStatsHTML(stats) {
+    return stats
+        .map(([label, value], i) => {
+            const sep =
+                i < stats.length - 1
+                    ? ` <span class="text-gray-500">/</span>`
+                    : "";
+            return (
+                `<span class="whitespace-nowrap">` +
+                `<span class="text-gray-400">${label} </span>` +
+                `<span class="${latencyClass(value, "online")}">${value}ms</span>` +
+                `${sep}</span>`
+            );
+        })
+        .join(" ");
+}
+
 function updateHostRow(host, index) {
     const latencyEl = document.querySelector(
         `.latency-value[data-host="${index}"]`,
@@ -712,28 +738,22 @@ function updateHostRow(host, index) {
     const min = host.minLatency();
     const max = host.maxLatency();
     if (host.status === "online" && avg !== null) {
-        statusEl.innerHTML =
+        statusEl.innerHTML = statusStatsHTML([
-            `<span class="text-gray-400">min </span><span class="${latencyClass(min, "online")}">${min}ms</span>` +
+            ["min", min],
-            ` <span class="text-gray-500">/</span> ` +
+            ["med", med],
-            `<span class="text-gray-400">med </span><span class="${latencyClass(med, "online")}">${med}ms</span>` +
+            ["avg", avg],
-            ` <span class="text-gray-500">/</span> ` +
+            ["max", max],
-            `<span class="text-gray-400">avg </span><span class="${latencyClass(avg, "online")}">${avg}ms</span>` +
+        ]);
-            ` <span class="text-gray-500">/</span> ` +
+        statusEl.className = STATUS_TEXT_CLASS;
-            `<span class="text-gray-400">max </span><span class="${latencyClass(max, "online")}">${max}ms</span>`;
-        statusEl.className =
-            "status-text text-xs whitespace-nowrap text-right col-span-2 mt-5";
     } else if (host.status === "offline") {
         statusEl.textContent = "unreachable";
-        statusEl.className =
+        statusEl.className = `${STATUS_TEXT_CLASS} text-red-400`;
-            "status-text text-xs text-red-400 whitespace-nowrap text-right col-span-2 mt-5";
     } else if (host.status === "error") {
         statusEl.textContent = "timeout";
-        statusEl.className =
+        statusEl.className = `${STATUS_TEXT_CLASS} text-orange-400`;
-            "status-text text-xs text-orange-400 whitespace-nowrap text-right col-span-2 mt-5";
     } else {
         statusEl.textContent = "connecting...";
-        statusEl.className =
+        statusEl.className = `${STATUS_TEXT_CLASS} text-gray-500`;
-            "status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
     }
 
     SparklineRenderer.draw(canvas, host.history);
@@ -1044,8 +1064,7 @@ function greyOutUI(state) {
         }
         if (statusEl) {
             statusEl.textContent = "paused";
-            statusEl.className =
+            statusEl.className = `${STATUS_TEXT_CLASS} text-gray-500`;
-                "status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
         }
         // Grey out the status dot
         const row = document.querySelector(`.host-row[data-index="${i}"]`);