DateTimePicker doesn't fit nicely in a FormLayout with labels set on the side

[OlliTietavainenVaadin]

Description

DateTimePicker set in a FormLayout with labels set to the side doesn't fit the bounds of the form cell.

Possibly related issue: #808

Expected outcome

DateTimePicker should respect the cell boundaries

Minimal reproducible example

public class HelloWorldView extends Div {
    public HelloWorldView() {
        setSizeFull();
        FormLayout formLayout = new FormLayout();
        formLayout.addFormItem(new TextField(), "TextField 1");
        formLayout.addFormItem(new TextField(), "TextField 2");
        formLayout.addFormItem(new DateTimePicker(), "DateTimePicker 1");
        formLayout.addFormItem(new DateTimePicker(), "DateTimePicker 2");
        add(formLayout);
    }
}

Steps to reproduce

Open the view. Resizing the browser window should show the broken behavior at certain breakpoints even with the default settings.

Environment

Vaadin version(s): 23.2.8
OS: Windows

Browsers

No response

[web-padawan]

Related to #112

[TatuLund]

I noticed the same when working on ProtoTools, I needed to apply some additional css to patch it work nicely in responsive layout. Also using it in Grid's editor is tricky. See: https://github.com/tatulund/prototools/tree/master/src%2Fmain%2Fresources%2FMETA-INF%2Fresources%2Ffrontend

[TatuLund]

Should the expected behavior to be wrapping the elements when they do not fit?

Define CSS

themes/my-theme/components/vaadin-date-time-picker.css

:host([theme~="picker-responsive"]) .slots {
    flex-wrap: wrap;
}

Enable theme variant with Java

dateTimePicker.addThemeName("picker-responsive");

[rolfsmeds]

Workaround for forcing the DTP (or any other field for that matter) wrapped in a FormItem to shrink to fit into the available space:

1. Set max-width:100% on the field itself, e.g. dateTimePicker.setMaxWidth("100%");

2. Apply min-width:0 to the FormItem's content element (0 makes it shrink to nothing, so if that's an issue you can replace it with something a bit less extreme like 8em). The exact CSS, added to themename/components/vaadin-form-layout.css or through @CssImport(filename.css, themeFor="vaadin-form-layout") is

#content {
  min-width: 0;
}

[rolfsmeds]

I suppose one solution that would avoid breaking changes would be to introduce a style property for setting the min-width?

E.g. --vaadin-form-layout-field-min-width or something, that defaults to auto, but can easily be set to something else.

[yuriy-fix]

The issue was triaged and currently added to the backlog for further investigation.

[rolfsmeds]

Come to think of it, this is a special case of #606, so a universal solution for all text input field types would be best.

However, we'd still need a way (either default or opt-in) for FormItem to shrink below the default, which it won't do even if the field inside it has a smaller min-width.