Break long values on the webhook page and event log at phone width (closes #391 )

An event's ID or content type, or a name with no place to break, ran past its row and was cut off by the card at 390 pixels, and a long webhook name made the webhook page scroll sideways. Both pages' outer containers now carry wrap-anywhere, so such a value breaks only where it must; the event log's title row wraps like the webhook page's. The browser test gains a 390-pixel check of both pages: neither scrolls sideways and nothing shown runs past the page's or its card's edge. Its seeded webhook name and newer event's content type are long enough to fail without the change. Model: opus-5-5
2026-10-03 03:52:09 +00:00
5 changed files with 81 additions and 10 deletions
@@ -251,8 +251,9 @@ func TestHandleSourceDetail_RendersNamedTargetFields(
 // 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.
+// wrapping of its title row and of long values, so neither the buttons
+// beside the title nor a long name push a phone-width window into
+// scrolling sideways.
 func TestHandleSourceDetail_FitsWideAndNarrowWindows(t *testing.T) {
 	t.Parallel()

@@ -273,7 +274,7 @@ func TestHandleSourceDetail_FitsWideAndNarrowWindows(t *testing.T) {

 	assert.Contains(
 		t, body,
-		`<div class="mx-auto px-6 py-8" style="max-width: 108rem"`,
+		`<div class="mx-auto px-6 py-8 wrap-anywhere" style="max-width: 108rem"`,
 	)
 	assert.Contains(
 		t, body,
@@ -98,20 +98,25 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	checkRefusedNewWebhook(ctx, t, srv.URL+"/hooks/new")
 	checkEventLog(ctx, t, page+"/events", event.ID, older.ID, target.Name)
 	checkMobileMenu(ctx, t, page)
+	checkPhoneWidth(ctx, t, page, page+"/events", target.Name)

 	assert.Empty(t, problems(), "the browser reported problems")
 }

 // seedBrowserWebhook seeds the webhook the browser test loads, owned by
 // userID: an entrypoint, two events, and a target whose delivery of the
-// newer event failed once with a 502. It returns the webhook, the older
-// and the newer event, and the target.
+// newer event failed once with a 502. The webhook's name and the newer
+// event's content type are each too long for one line on a phone. It
+// returns the webhook, the older and the newer event, and the target.
 func seedBrowserWebhook(
 	t *testing.T, env *testEnv, userID string,
 ) (*database.Webhook, *database.Event, *database.Event, *database.Target) {
 	t.Helper()

 	webhook := env.seedWebhook(t, userID)
+	require.NoError(t, env.db.DB().Model(webhook).Update(
+		"name", "payment_provider_production_notifications",
+	).Error)
 	require.NoError(t, env.db.DB().Omit(clause.Associations).Create(
 		&database.Entrypoint{
 			WebhookID: webhook.ID,
@@ -126,6 +131,9 @@ func seedBrowserWebhook(

 	webhookDB, err := env.dbMgr.GetDB(webhook.ID)
 	require.NoError(t, err)
+	require.NoError(t, webhookDB.Model(event).Update(
+		"content_type", "application/vnd.paymentprovider.event+json",
+	).Error)
 	require.NoError(t, webhookDB.Omit(clause.Associations).Create(
 		&database.DeliveryResult{
 			DeliveryID: dlv.ID,
@@ -1292,3 +1300,60 @@ func checkMobileMenu(ctx context.Context, t *testing.T, url string) {
 	click(ctx, t, button)
 	assert.True(t, hidden(ctx, menu), "the menu button does not close the menu")
 }
+
+// scrollsSideways reports whether the page is wider than the window. A
+// page's clientWidth is the window's width less its scroll bar.
+const scrollsSideways = `document.documentElement.scrollWidth >
+	document.documentElement.clientWidth`
+
+// cutOffElements lists each element, without elements inside it, that
+// is shown but runs past the page's edge or its card's, by more than a
+// pixel of rounding. A card hides what runs past its edge.
+const cutOffElements = `[...document.querySelectorAll("body *")]
+	.filter((el) => {
+		const box = el.getBoundingClientRect();
+		const card = el.closest(".card")?.getBoundingClientRect();
+		const left = card ? card.left : 0;
+		const right = card ? card.right : document.documentElement.clientWidth;
+		return el.children.length === 0 && box.width > 0 &&
+			(box.left < left - 1 || box.right > right + 1);
+	})
+	.map((el) => el.outerHTML.slice(0, 120))`
+
+// checkPhoneWidth loads the webhook page, url, and its event log,
+// eventLog, in a phone-sized window, the event log with the attempts of
+// the newest event's delivery to targetName shown. It checks that
+// neither page scrolls sideways and that nothing shown on either, no
+// status, time or control, is cut off at the page's or its card's edge.
+func checkPhoneWidth(
+	ctx context.Context, t *testing.T, url, eventLog, targetName string,
+) {
+	t.Helper()
+
+	var (
+		sideways bool
+		cutOff   []string
+	)
+
+	measure := chromedp.Tasks{
+		chromedp.Evaluate(scrollsSideways, &sideways),
+		chromedp.Evaluate(cutOffElements, &cutOff),
+	}
+
+	require.NoError(t, chromedp.Run(
+		ctx,
+		chromedp.EmulateViewport(phoneWidth, phoneHeight),
+		loadPage(url),
+		measure,
+	))
+	assert.False(t, sideways, "the webhook page scrolls sideways on a phone")
+	assert.Empty(t, cutOff, "the webhook page cuts these off on a phone")
+
+	require.NoError(t, chromedp.Run(ctx, loadPage(eventLog)))
+	click(ctx, t, `//span[text()="`+targetName+`"]`)
+	require.True(t, shown(ctx, `//span[text()="Attempt 1"]`),
+		"clicking the delivery does not show its attempts")
+	require.NoError(t, chromedp.Run(ctx, measure))
+	assert.False(t, sideways, "the event log scrolls sideways on a phone")
+	assert.Empty(t, cutOff, "the event log cuts these off on a phone")
+}
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-600:oklch(68.1% .162 75.834);--color-green-600:oklch(62.7% .194 149.214);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-light:300;--font-weight-medium:500;--tracking-wide:.025em;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-50:#e3f2fd;--color-primary-500:#2196f3;--color-primary-600:#1e88e5;--color-primary-700:#1976d2;--color-primary-800:#1565c0;--color-error-50:#ffebee;--color-error-500:#f44336;--color-error-700:#d32f2f;--color-success-50:#e8f5e9;--color-success-500:#4caf50;--color-success-700:#388e3c}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;oLine truncated
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-600:oklch(68.1% .162 75.834);--color-green-600:oklch(62.7% .194 149.214);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-light:300;--font-weight-medium:500;--tracking-wide:.025em;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-50:#e3f2fd;--color-primary-500:#2196f3;--color-primary-600:#1e88e5;--color-primary-700:#1976d2;--color-primary-800:#1565c0;--color-error-50:#ffebee;--color-error-500:#f44336;--color-error-700:#d32f2f;--color-success-50:#e8f5e9;--color-success-500:#4caf50;--color-success-700:#388e3c}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;oLine truncated
@@ -6,8 +6,10 @@
 <!-- 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">
+     no class this wide. wrap-anywhere: a value with no place to break,
+     such as a long name, breaks where it must instead of running past
+     the edge of a phone's screen. -->
+<div class="mx-auto px-6 py-8 wrap-anywhere" style="max-width: 108rem">
    <div class="mb-6">
        <a href="/hooks" class="btn-small">&larr; Back to webhooks</a>
        <div class="flex flex-wrap justify-between items-center gap-2 mt-2">
@@ -3,10 +3,13 @@
 {{define "title"}}Full Event Log - {{.Webhook.Name}} - Webhooker{{end}}

 {{define "content"}}
-<div class="max-w-6xl mx-auto px-6 py-8">
+<!-- wrap-anywhere: a value with no place to break, such as an event's
+     ID or content type, breaks where it must instead of running past
+     the edge of a phone's screen. -->
+<div class="max-w-6xl mx-auto px-6 py-8 wrap-anywhere">
    <div class="mb-6">
        <a href="/hook/{{.Webhook.ID}}" class="btn-small">&larr; Back to {{.Webhook.Name}}</a>
-        <div class="flex justify-between items-center mt-2">
+        <div class="flex flex-wrap justify-between items-center gap-2 mt-2">
            <h1 class="text-2xl font-medium text-gray-900">Full Event Log</h1>
            <!-- Under a filter, this counts the events the filter lists. -->
            <span class="text-sm text-gray-500">{{if gt .TotalEvents (len .Events)}}{{len .Events}} most recent of {{.TotalEvents}} events{{else}}{{.TotalEvents}}{{if not .Show}} total{{end}} event{{if ne .TotalEvents 1}}s{{end}}{{end}}{{if eq .Show "failed"}} with a failed delivery{{else if eq .Show "pending"}} with a delivery pending or retrying{{end}}</span>