Fix the hours field's label sitting on the outline
The label read "Horas por semana" struck through by the field's own border: 5px above the wrapper instead of 18, straddling the 2px outline. Angular Material measures an outlined field's floating label once on init and writes the result to the element as an inline transform. This field is the only one inside an @if, so it is measured before it has any geometry and keeps the unfloated offset. @pi/ui already publishes the right values for every other field and its rule matches this one too -- it simply loses to an inline style, so the fix restates the library's own numbers with `!important`, which is what outranks one. It also gains a placeholder, which every other field already had. The e2e config now derives the dev server's port from BASE_URL instead of pinning 4200. With `reuseExistingServer`, an unrelated project's dev server on that port gets adopted silently and all five tests fail with "element(s) not found" while the page under test was never served -- which is exactly what happened while verifying this. Verified: all four labels now land at -18 with a 48px box, light and dark; lint, 15 unit tests, build and 5 e2e green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -115,7 +115,17 @@ type Kind = 'contribute' | 'request';
|
||||
<pi-label [isRequired]="true">{{ copy().form.organisation }}</pi-label>
|
||||
</pi-text-field>
|
||||
} @else {
|
||||
<pi-number-field [formField]="contact.hours_per_week">
|
||||
<!--
|
||||
The placeholder is not decoration. Without one, Material leaves
|
||||
this label in its unfloated position and writes an inline
|
||||
translateY(-50%) that drops the text straight onto the outline's
|
||||
top border, struck through by it. Every other field here has a
|
||||
placeholder, which is why this was the only one that looked wrong.
|
||||
-->
|
||||
<pi-number-field
|
||||
[formField]="contact.hours_per_week"
|
||||
[placeholder]="copy().form.hoursHint"
|
||||
>
|
||||
<pi-label>{{ copy().form.hours }}</pi-label>
|
||||
</pi-number-field>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user