From c23ffbac656857a0d2a3d702a3265bba07e2b71d Mon Sep 17 00:00:00 2001
From: clawbot <35+clawbot@noreply.example.org>
Date: Fri, 2 Oct 2026 09:49:33 +0200
Subject: [PATCH] Widen the webhook page by half so an entrypoint URL fits on
 one line (closes #350)

The webhook page's maximum width goes from 72rem (1152 px) to 108rem (1728 px), half again as wide, so an entrypoint URL stays on one line in 1920- and 1440-pixel windows; the statistics pane and both columns widen with it. The title row now wraps, so a phone-width window no longer scrolls sideways.

The width is an inline style: static/css/style.css is linked by no page, and the committed Tailwind stylesheet has no class that wide. The webhook list, the event log, the navbar and the footer stay at 72rem.

Model: opus-5-5
---
 internal/handlers/source_detail_test.go | 34 +++++++++++++++++++++++++
 templates/source_detail.html            |  8 ++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/internal/handlers/source_detail_test.go b/internal/handlers/source_detail_test.go
index faa945e..ad79ed2 100644
--- a/internal/handlers/source_detail_test.go
+++ b/internal/handlers/source_detail_test.go
@@ -241,3 +241,37 @@ func TestHandleSourceDetail_RendersNamedTargetFields(
 	assert.Contains(t, body, "(unavailable)")
 	assert.NotContains(t, body, "beak")
 }
+
+// TestHandleSourceDetail_FitsWideAndNarrowWindows pins the webhook
+// page's maximum width at 108rem (1728 px), half again the 72rem of
+// max-w-6xl that the webhook list and the event log use, so an
+// entrypoint URL fits on one line in a 1920-pixel window; and the
+// wrapping of its title row, so the buttons beside the title do not
+// push a phone-width window into scrolling sideways.
+func TestHandleSourceDetail_FitsWideAndNarrowWindows(t *testing.T) {
+	t.Parallel()
+
+	var (
+		h    *handlers.Handlers
+		sess *session.Session
+		db   *database.Database
+	)
+
+	app := newTestApp(t, &h, &sess, &db)
+	app.RequireStart()
+
+	t.Cleanup(app.RequireStop)
+
+	wh := seedWebhook(t, db)
+
+	body := renderSourceDetailPage(t, h, sess, wh.ID)
+
+	assert.Contains(
+		t, body,
+		`<div class="mx-auto px-6 py-8" style="max-width: 108rem"`,
+	)
+	assert.Contains(
+		t, body,
+		`<div class="flex flex-wrap justify-between items-center gap-2 mt-2">`,
+	)
+}
diff --git a/templates/source_detail.html b/templates/source_detail.html
index 7b4abf4..2a89922 100644
--- a/templates/source_detail.html
+++ b/templates/source_detail.html
@@ -3,10 +3,14 @@
 {{define "title"}}{{.Webhook.Name}} - Webhooker{{end}}
 
 {{define "content"}}
-<div class="max-w-6xl mx-auto px-6 py-8" x-data="{ showAddEntrypoint: false, showAddTarget: false }">
+<!-- 108rem, half again the 72rem (max-w-6xl) of the webhook list, the
+     event log, the navbar and the footer, so an entrypoint URL fits on
+     one line. An inline style, because the committed tailwind.css has
+     no class this wide. -->
+<div class="mx-auto px-6 py-8" style="max-width: 108rem" x-data="{ showAddEntrypoint: false, showAddTarget: false }">
     <div class="mb-6">
         <a href="/hooks" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to webhooks</a>
-        <div class="flex justify-between items-center mt-2">
+        <div class="flex flex-wrap justify-between items-center gap-2 mt-2">
             <div>
                 <h1 class="text-2xl font-medium text-gray-900">{{.Webhook.Name}}</h1>
                 {{if .Webhook.Description}}