sneak/webhooker
1
0
Fork 0
Code Issues 15 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Break long values on the webhook page and event log at phone width (closes #391)
check / check (push) Successful in 3m38s
Details

Browse Source 
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
This commit is contained in:
clawbot
2026-10-03 04:39:37 +00:00
parent 935e18c6f1
commit d5bdef9b56
8 changed files with 96 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/source_detail.html
+8 -5
View File
@@ -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}}