bug(MatFormFieldModule): Label is outside the bounds of the form field

[GeorgianStan]

The label associated with a MatFormField is not positioned correctly.

Case 1 - matPrefix
As visible in the following image, the label is outside the bounds of the form field.

Inside form-field.ts - _updateOutlineLabelOffset() the HTML element is moved on the x-axis:

floatingLabel.style.transform = `var( --mat-mdc-form-field-label-transform, {FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset}))`;

This is also visible in DevTools.
This transformation rule looks valid because it has a prefix icon.
But in addition, if the element is moved on the x-axis, its width should be reduced by a value equal to the offset to fit the form field bounds.

width: calc(100% - calc(1 * (51.97072219848633px + var(--mat-mdc-form-field-label-offset-x, 0px))));

Case 2 - matSuffix
For matSuffix the fix would be easier, it should only update its width with the offset value.

However here it seems that the offset variable is missing from the scss file.

Adding the CSS variable to the above file and updating the width should help with this issue.

Reproduction

StackBlitz link: https://stackblitz.com/edit/rudguk-yo1ggv?file=src%2Fexample%2Fform-field-appearance-example.html

Expected Behavior

I expect the label to fit into the borders of the wrapping element.

Actual Behavior

The label goes outside the borders of the wrapping element.

Environment

• Angular: latest
• CDK/Material: latest
• Browser(s): Any
• Operating System (e.g. Windows, macOS, Ubuntu): Any

[zarend]

Hello,

Thank you for reporting this and proving stackblitz example. Assigning to @mmalerba , who is owner of form-field.

IF you're looking to contribute, feel free to send us a PR that fixes this.

-Zach