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.

[web-padawan]

Adding white-space: nowrap doesn't seem to solve the problem as in case of using the hardcoded item label with, the required indicator would still wrap (this is what is done in the linked example: --vaadin-form-item-label-width: 60px).

We could add display: flex on the label part but it will be still possible to overflow e.g. like this:

[rolfsmeds]

overflow-wrap: break-word; could solve that perhaps, to force work-breaking wraps if the label would otherwise overflow?