From 4d2a8dd26b4bcb7936b34a3c7d18f24047e998c3 Mon Sep 17 00:00:00 2001 From: pigui Date: Mon, 31 Aug 2026 13:31:58 +0200 Subject: [PATCH] Fix the doubled edge down the left of the textarea Focusing the textarea while it had an error drew two red curves down its left side, a couple of pixels apart. Not a positioning problem -- the ring and the outline share the same box to the pixel. It is clamping. The outline's leading piece is 12px wide, so the 20px corner radius it was given got clamped to 12, while the focus ring, drawn across the full width, kept a true 20px curve. Same declared radius, two different curves. At 10px nothing is clamped and they land on top of each other. The single-line fields never showed this: at 999px both the outline and the ring clamp to half the field's height, so they already agreed. Verified at 2x: one continuous outline, ring and leading piece both reporting 10px. Co-Authored-By: Claude Opus 5 --- landing/src/app/ui/contact-form.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/landing/src/app/ui/contact-form.scss b/landing/src/app/ui/contact-form.scss index 1030f33..e85bdaf 100644 --- a/landing/src/app/ui/contact-form.scss +++ b/landing/src/app/ui/contact-form.scss @@ -84,8 +84,18 @@ font-weight: var(--pi-theme-field-label-weight, inherit); } + // 10px, not the 20px this started at, and the reason is clamping. + // + // The outline's leading piece is only 12px wide, so a 20px corner radius gets + // clamped to 12 — while the focus ring, drawn across the full width, keeps a + // true 20px curve. Same box, same declared radius, two different curves, and + // a visibly doubled edge down the left side. Under 12px nothing is clamped + // and the two agree. + // + // The single-line fields never showed this: at 999px both the outline and the + // ring clamp to half the field's height, so they land on the same curve. .pi-field.pi-form-field__textarea { - --pi-theme-field-radius: 1.25rem; + --pi-theme-field-radius: 0.625rem; } }