fix: solve overlapping issues inside form layout

Fix unwanted overlapping when the form is too narrow.

Author: mlopezFC

demo/index.html

@@ -41,6 +41,16 @@
         openDateRangePickerButton.addEventListener('click', function(e) {
           dateRangePickerWithoutTextFields.openOnPosition(event.clientX,event.clientY);
         });
+
+        var formLayout = document.querySelector('#formLayout');
+
+        formLayout.responsiveSteps = [
+          {minWidth: 0, columns: 1, labelsPosition: 'top'},
+          {minWidth: '10em', columns: 1},
+          {minWidth: '20em', columns: 2},
+          {minWidth: '30em', columns: 3}
+        ];
+
       });
     </script>
   </head>
@@ -87,8 +97,10 @@ <h3>Clear button</h3>
       <h3>Inside Form Layout</h3>
       <demo-snippet>
         <template preserve-content>
-          <vaadin-form-layout>
+          <vaadin-form-layout id="formLayout">
             <vaadin-text-field label="First Name" value="Jane"></vaadin-text-field>
+            <vaadin-text-field label="Last Name" value="Smith"></vaadin-text-field>
+            <vaadin-text-field label="Address" value="A place"></vaadin-text-field>
             <vcf-date-range-picker clear-button-visible label="Super long super long super long super long super long super long super long super long super  label" value="1990-01-28" error-message="Super long super long super long super long super long super long super long super long super error "></vcf-date-range-picker>
             <vaadin-text-field label="Email" value="[email protected]"></vaadin-text-field>
             <vaadin-date-picker label="Birthday" value="1993-06-23"></vaadin-date-picker>

src/vcf-date-range-picker.js

@@ -120,8 +120,15 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
       [part="end-text-field"] {
         align-self: baseline;
         flex-grow: 1;
-        --vaadin-text-field-default-width: 16ch;
         overflow: hidden;
+        --vaadin-text-field-default-width: 16ch;
+      }
+      [focus-ring][part="end-text-field"] {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+      [focus-ring][part="end-text-field"] [part="toggle-button"] {
+        margin-right: -2px;
       }
       [part="dash"][hidden] {
         display: none;

theme/lumo/vcf-date-range-picker-text-field-styles.js

@@ -48,6 +48,9 @@ registerStyles(
       :host([id="startInput"]) [part="input-field"] {
         padding-right:0px;
       }
+      :host([id="endInput"][focus-ring]) [part="value"] {
+        margin-left:-2px;
+      }
       :host([id="startInput"]) [part="value"] {
         padding-right:0px;
       }