From b33ea72448cd19d34b216671955e0723d73ee40c Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Fri, 2 Oct 2026 05:31:10 +0000
Subject: [PATCH] Widen the webhook page by half so an entrypoint URL fits on
 one line (closes #350)

The webhook page's container was capped at max-w-6xl, 72rem (1152
px), which made a typical entrypoint URL wrap even in a 1440-pixel
window. It is now capped at 108rem (1728 px). The width is an inline
style because the committed tailwind.css has no class that wide, and
regenerating it needs the unpinned tool. The other pages, the navbar
and the footer keep 72rem.

The title row now wraps: its three buttons made a phone-width window
scroll sideways.

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

diff --git a/internal/handlers/source_detail_test.go b/internal/handlers/source_detail_test.go
index faa945e..841fd24 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 other pages 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..880d803 100644
--- a/templates/source_detail.html
+++ b/templates/source_detail.html
@@ -3,10 +3,13 @@
 {{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 }">
+<!-- Half again as wide as the other pages (max-w-6xl, 72rem), 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}}