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

A name, ID or content type 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. The elements holding such values now carry wrap-anywhere, so a value breaks only where it must; controls, statuses and times never do, so a row too wide for a phone still runs past the edge. 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 04:39:37 +00:00
8 changed files with 96 additions and 20 deletions
@@ -1280,7 +1280,9 @@ the event log only the newest starts expanded, and an event there expands and
 collapses when its row's caret or its ID is clicked, and from the keyboard, but
 not when its ID is selected with the mouse, and a delivery's attempts inside it
 expand and collapse; and at phone width the menu button opens and closes the
-mobile menu. It also fails if the browser reports a console warning or error, an
+mobile menu, and neither the webhook page nor the event log, with a delivery's
+attempts open, scrolls sideways or cuts anything off at the page's or a card's
+edge. It also fails if the browser reports a console warning or error, an
 uncaught exception, or anything the policy refused. `make check` and the image
 build lint it but do not run it, and `make test` leaves it out (its file is
 built only with the `browser` build tag). Run it with `make test-browser` after
@@ -17,14 +17,15 @@ import (

 // arrivedAt is how a page names the entrypoint an event arrived at.
 func arrivedAt(name string) string {
-	return `Arrived at <span class="text-gray-900">` + name + `</span>`
+	return `Arrived at <span class="text-gray-900 wrap-anywhere">` + name +
+		`</span>`
 }

 // copiedRequestArrivedAt is how a page names, for a resubmitted copy,
 // the entrypoint the request it copies arrived at.
 func copiedRequestArrivedAt(name string) string {
-	return `The request it copies arrived at <span class="text-gray-900">` +
-		name + `</span>`
+	return `The request it copies arrived at ` +
+		`<span class="text-gray-900 wrap-anywhere">` + name + `</span>`
 }

 // headerBox is how a page shows an event's request header lines: as
@@ -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
@@ -4,7 +4,7 @@
     an event's own page. Spans only, since a button may hold no div. -->
 <span class="flex flex-1 flex-wrap items-center justify-between gap-3">
    <span class="flex flex-wrap items-center gap-3">
-        <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
+        <span class="text-sm text-gray-700 wrap-anywhere">{{.Target.DisplayName}}</span>
        {{if .Replay}}<span class="text-xs text-gray-500">replay</span>{{end}}
        <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{with .Paused}}waiting: target paused after repeated failures, next try no earlier than {{.Until}} ({{.Relative}}){{else}}{{.Status}}{{end}}</span>
    </span>
@@ -6,9 +6,9 @@
     entrypoint; the request it copies did. -->
 <div class="space-y-2 text-xs">
    {{if .ResubmittedFrom}}
-    <p class="text-gray-500">The request it copies arrived at <span class="text-gray-900">{{.Entrypoint}}</span></p>
+    <p class="text-gray-500">The request it copies arrived at <span class="text-gray-900 wrap-anywhere">{{.Entrypoint}}</span></p>
    {{else}}
-    <p class="text-gray-500">Arrived at <span class="text-gray-900">{{.Entrypoint}}</span></p>
+    <p class="text-gray-500">Arrived at <span class="text-gray-900 wrap-anywhere">{{.Entrypoint}}</span></p>
    {{end}}
    {{if .HeadersCut}}
    <p class="text-gray-500">The request headers are larger than the event log shows. <a href="{{.Body.EventURL}}" class="btn-small">Show the request headers</a></p>
@@ -6,15 +6,18 @@
 <!-- 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. -->
+     no class this wide. wrap-anywhere goes only on names and
+     descriptions: a row too wide for a phone must still run past the
+     edge, where the browser test sees it, rather than break its
+     controls mid-word. -->
 <div class="mx-auto px-6 py-8" 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">
            <div>
-                <h1 class="text-2xl font-medium text-gray-900">{{.Webhook.Name}}</h1>
+                <h1 class="text-2xl font-medium text-gray-900 wrap-anywhere">{{.Webhook.Name}}</h1>
                {{if .Webhook.Description}}
-                <p class="text-sm text-gray-500 mt-1">{{.Webhook.Description}}</p>
+                <p class="text-sm text-gray-500 mt-1 wrap-anywhere">{{.Webhook.Description}}</p>
                {{end}}
            </div>
            <div class="flex gap-2">
@@ -60,7 +63,7 @@
                {{range .Entrypoints}}
                <div class="p-4" x-data="collapsible">
                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
-                        <span x-show="closed" class="text-sm font-medium text-gray-900">{{if .Description}}{{.Description}}{{else}}Entrypoint{{end}}</span>
+                        <span x-show="closed" class="text-sm font-medium text-gray-900 wrap-anywhere">{{if .Description}}{{.Description}}{{else}}Entrypoint{{end}}</span>
                        <!-- Edit shows this form in place of the
                             description and hides until it closes, and
                             Cancel resets what was typed. With
@@ -249,7 +252,7 @@
                {{range .Targets}}
                <div class="p-4">
                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
-                        <span class="text-sm font-medium text-gray-900">{{.Name}}</span>
+                        <span class="text-sm font-medium text-gray-900 wrap-anywhere">{{.Name}}</span>
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="badge-info">{{if eq .Type "database"}}archive{{else}}{{.Type}}{{end}}</span>
                            {{if .Active}}
@@ -3,10 +3,15 @@
 {{define "title"}}Full Event Log - {{.Webhook.Name}} - Webhooker{{end}}

 {{define "content"}}
+<!-- wrap-anywhere goes only on names, IDs and content types: a row too
+     wide for a phone must still run past the edge, where the browser
+     test sees it, rather than break its statuses, times or controls
+     mid-word. So a target's name in an event's row, which shares its
+     element with the delivery's status, goes without. -->
 <div class="max-w-6xl mx-auto px-6 py-8">
    <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">
+        <a href="/hook/{{.Webhook.ID}}" class="btn-small wrap-anywhere">&larr; Back to {{.Webhook.Name}}</a>
+        <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>
@@ -28,8 +33,8 @@
                <div role="button" tabindex="0" class="btn-small w-full flex flex-wrap justify-between gap-2" :aria-expanded="open" @mousedown="cancelPendingToggle" @click="toggleUnlessSelecting" @keydown.enter.prevent="toggle" @keydown.space.prevent="toggle">
                    <span class="flex flex-wrap items-center gap-3">
                        <span class="badge-info">{{.Method}}</span>
-                        <span class="text-sm font-mono text-gray-700">{{.ID}}</span>
-                        <span class="text-sm text-gray-500">{{.ContentType}}</span>
+                        <span class="text-sm font-mono text-gray-700 wrap-anywhere">{{.ID}}</span>
+                        <span class="text-sm text-gray-500 wrap-anywhere">{{.ContentType}}</span>
                        {{if .ResubmittedFrom}}
                        <span class="text-xs text-gray-500" title="This event is a copy of {{.ResubmittedFromID}}">resubmitted copy</span>
                        {{end}}
@@ -54,7 +59,7 @@
                <div x-show="open" x-cloak class="mt-3 p-3 bg-gray-50 rounded-md">
                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <div class="text-xs text-gray-500">
-                            {{if .ResubmittedFrom}}Resubmitted from event <a href="/hook/{{$.Webhook.ID}}/events/{{.ResubmittedFromID}}" class="btn-small font-mono">{{.ResubmittedFromID}}</a>.{{end}}
+                            {{if .ResubmittedFrom}}Resubmitted from event <a href="/hook/{{$.Webhook.ID}}/events/{{.ResubmittedFromID}}" class="btn-small font-mono wrap-anywhere">{{.ResubmittedFromID}}</a>.{{end}}
                            {{if .ResubmitCount}}Resubmitted as {{.ResubmitCount}} new event{{if ne .ResubmitCount 1}}s{{end}}.{{end}}
                        </div>
                        <form method="POST" action="/hook/{{$.Webhook.ID}}/events/{{.ID}}/resubmit" class="inline">