diff --git a/landing/src/app/ui/contact-form.scss b/landing/src/app/ui/contact-form.scss index ae448ae..f63feb1 100644 --- a/landing/src/app/ui/contact-form.scss +++ b/landing/src/app/ui/contact-form.scss @@ -130,3 +130,26 @@ font-size: var(--pi-font-size-x-small, 0.75rem); } } + +// TEMPORARY. Remove when @pi/ui ships the fix. +// +// `pi-number-field` declares `` unconditionally, so +// Material marks the field as having an icon prefix even though nothing is +// projected into it. The empty prefix is 4px wide and takes the place of the +// 16px inset every other field gets: the value ended up 12px to the left of +// its own label, which is what makes it look wrong. +// +// Only two of the library's twenty fields declare a prefix, both numeric, and +// only `incremental-number-field` actually uses one — so this is an oversight +// rather than a pattern. The fix belongs there and is written: +// `pireon-ui`, `number-field.component.html`, guarded by a `contentChild`. +// This restores the inset here until that version is published. +:host ::ng-deep .pi-form-field__number { + .mat-mdc-form-field-icon-prefix { + display: none; + } + + .mat-mdc-form-field-infix { + padding-left: 16px; + } +}