Break long values on the webhook page and event log at phone width (closes #391)
check / check (push) Successful in 3m39s
check / check (push) Successful in 3m39s
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
This commit is contained in:
@@ -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">← 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>
|
||||
|
||||
Reference in New Issue
Block a user