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 <noreply@anthropic.com>
This commit is contained in:
@@ -84,8 +84,18 @@
|
|||||||
font-weight: var(--pi-theme-field-label-weight, inherit);
|
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-field.pi-form-field__textarea {
|
||||||
--pi-theme-field-radius: 1.25rem;
|
--pi-theme-field-radius: 0.625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user