internal/server/alpine_browser_test.go

@@ -489,9 +489,13 @@ func checkEntrypointEdit(
 ) {
 	t.Helper()
 
+	// Cancel and Save are found inside the edit form, since the add
+	// target form has buttons of the same names.
 	const (
 		editForm    = `form[action$="/edit"]`
 		input       = editForm + ` input[name="description"]`
+		cancelEdit  = `//form[contains(@action, "/edit")]/button[text()="Cancel"]`
+		saveEdit    = `//form[contains(@action, "/edit")]/button[text()="Save"]`
 		description = `//span[text()="Entrypoint"]`
 		edit        = `//button[text()="Edit"]`
 	)
@@ -512,7 +516,7 @@ func checkEntrypointEdit(
 	require.NoError(t, chromedp.Run(
 		ctx, chromedp.SendKeys(input, "draft", chromedp.ByQuery),
 	))
-	click(ctx, t, `//button[text()="Cancel"]`)
+	click(ctx, t, cancelEdit)
 	assert.True(t, hidden(ctx, editForm),
 		"clicking Cancel does not hide the edit form")
 	assert.True(t, shown(ctx, description),
@@ -554,7 +558,7 @@ func checkEntrypointEdit(
 	require.NoError(t, chromedp.Run(
 		ctx, chromedp.SendKeys(input, "Billing sender", chromedp.ByQuery),
 	))
-	click(ctx, t, `//button[text()="Save"]`)
+	click(ctx, t, saveEdit)
 
 	assert.True(t, shown(ctx, `//span[text()="Billing sender"]`),
 		"saving the edit form does not change the description")

templates/source_detail.html

@@ -133,11 +133,13 @@
                  and the hidden type field submitted with them, exist
                  only while that type is chosen. A refused submission
                  comes back open on its type, with the values entered;
-                 Cancel empties the form. -->
+                 Cancel empties the form. The type choice's p-2, narrower
+                 than an input's own padding, keeps it, Next and Cancel on
+                 one row on a 360px-wide phone. -->
             <form method="POST" action="/hook/{{.Webhook.ID}}/targets" x-ref="form">
                 <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                 <div x-show="choosing" x-cloak class="p-4 bg-gray-50 border-b border-gray-200 flex flex-wrap gap-2">
-                    <select x-ref="type" aria-label="Target type" class="input text-sm w-32">
+                    <select x-ref="type" aria-label="Target type" class="input text-sm p-2 flex-1">
                         <option value="http">HTTP</option>
                         <option value="slack">Slack</option>
                         <option value="database">Database</option>