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

Fix the hours field's label sitting on the outline

Browse Source 
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:
pigui
2026-08-31 00:13:12 +02:00
parent 68ad014df0
commit 25d0fe500b
4 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,3 +28,28 @@
margin: 0;
color: var(--pi-color-warn, #d64545);
}
// The hours field sits inside an @if, and that is what breaks its label.
//
// Angular Material measures an outlined field's floating label once, on init,
// and writes the result to the element as an inline
// `transform: var(--mat-mdc-form-field-label-transform, translateY(-50%) …)`.
// A field created inside a conditional block is measured before it has any
// geometry, so the value it keeps is the unfloated one: the label ends up 5px
// above the wrapper instead of 18, straddling the 2px outline and struck
// through by it.
//
// `@pi/ui` already publishes the right geometry for every other field
// (`translateY(-3rem) scale(1)`, a 48px label box), and that rule matches this
// one too — it simply loses to the inline style. `!important` is what beats an
// inline declaration, and it is restating the library's own values, not
// inventing new ones.
:host ::ng-deep .pi-field.pi-form-field__number {
.mdc-notched-outline .mdc-floating-label {
height: var(--pi-spacing-xxxx-large) !important;
}
.mdc-text-field:not(.mat-form-field-no-animations) .mdc-floating-label {
transform: translateY(-3rem) scale(1) !important;
}
}