Form field label plus required indicator wraps (sometimes) one side positioned labeling

[stefanuebe]

Description

Our form layout allows to place labels on the side of input fields. Setting a required indicator might lead to a case, where the label container wraps its content, placing the label in the first line and the required indicator in the second one.

Expected outcome

The div containing the label text and the required indicator should not break lines / wrap content. Instead the label text should be allowed to wrap.

The above shown sample applied the following changes to the <div part="label"> inside the form field's shadow dom (plus adding some gibberish to the <label>.

display: flex;
gap: var(--lumo-space-xs);

Minimal reproducible example

1. Go to https://vaadin.com/docs/latest/components/form-layout#side
2. Select one of the three text fields via the dom inspector.
3. Add the "required" attribute to it. The attribute will automatically be added to the form field, too.
4. The required indicator appears and will be shown in the next line. (Strangely not always, but most times)

Steps to reproduce

See minimal reproducible example.

Environment

Vaadin version(s): 24.4.x? (depends on the Vaadin version used in the docs) OS: --

Browsers

Chrome

[rolfsmeds]

It might be sufficient to set white-space:no-wrap on [part~="label"]

[TatuLund]

There is another ticket about this elsewhere, so this duplicate. I have commented a workaround there.