Steps to reproduce

1.  Create form with form or declarative layout

   form:
     properties:
       salutation:
         label: Salutation
         $type: textField
       firstName:
         label: First Name
         $type: textField
       lastName:
         label: Last Name
         $type: textField
     layout:
       $type: form
       #$type: declarativeLayout
       #template: /hello-magnolia/dialogs/declarative-dialogs/test.html
   

1.  If use declarative, use tag <vaadin-form-layout> as document mentions:

   It is recommended that Magnolia properties be nested inside a <vaadin-form-layout> tag. If you insert a Magnolia property inside a <vaadin-vertical-layout> tag, the component will not be rendered as nicely.

1. Check the field's width

Expected results

Fields should be rendered nicely

Actual results

Fields are full width and not look nice

Workaround

Development notes