pigui/landing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the doubled edge down the left of the textarea

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
pigui
2026-08-31 13:31:58 +02:00
parent 3316ac89fd
commit 4d2a8dd26b
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
landing/src/app/ui/contact-form.scss
View File

@@ -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;
}
}