diff --git a/src/implementations/vanilla/components/datepicker/_datepicker.scss b/src/implementations/vanilla/components/datepicker/_datepicker.scss
index 705b584dcef..c750d98559e 100644
--- a/src/implementations/vanilla/components/datepicker/_datepicker.scss
+++ b/src/implementations/vanilla/components/datepicker/_datepicker.scss
@@ -26,13 +26,9 @@ $_picker-theme-color: null !default;
 .ecl-datepicker {
   margin: 0;
   position: relative;
-  width: 50%;
-
-  @include breakpoints.up('m') {
-    width: 30%;
-  }
+  width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('s') {
     width: map.get(theme.$form, 's');
   }
 }
diff --git a/src/implementations/vanilla/components/range/_range.scss b/src/implementations/vanilla/components/range/_range.scss
index 02086c02f41..47e187143a1 100644
--- a/src/implementations/vanilla/components/range/_range.scss
+++ b/src/implementations/vanilla/components/range/_range.scss
@@ -82,13 +82,9 @@ $_range-margin-top: null !default;
 
 // Width
 .ecl-range--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -97,10 +93,6 @@ $_range-margin-top: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
@@ -108,7 +100,7 @@ $_range-margin-top: null !default;
 .ecl-range--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }
diff --git a/src/implementations/vanilla/components/select/_select.scss b/src/implementations/vanilla/components/select/_select.scss
index 6431dfb55a5..51c71e94f05 100644
--- a/src/implementations/vanilla/components/select/_select.scss
+++ b/src/implementations/vanilla/components/select/_select.scss
@@ -107,13 +107,9 @@ $_multiple_counter_background: null !default;
 }
 
 .ecl-select__container--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -122,10 +118,6 @@ $_multiple_counter_background: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
@@ -133,7 +125,7 @@ $_multiple_counter_background: null !default;
 .ecl-select__container--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }
@@ -256,6 +248,7 @@ $_multiple_counter_background: null !default;
     cursor: default;
     box-shadow: $_multiple-dropdown-shadow;
     box-sizing: border-box;
+    min-width: map.get(theme.$form, 'm');
     position: absolute;
     z-index: map.get(theme.$z-index, 'dropdown');
   }
diff --git a/src/implementations/vanilla/components/text-area/_text-area.scss b/src/implementations/vanilla/components/text-area/_text-area.scss
index 7c7aa361e7b..00430c9a950 100644
--- a/src/implementations/vanilla/components/text-area/_text-area.scss
+++ b/src/implementations/vanilla/components/text-area/_text-area.scss
@@ -59,14 +59,18 @@ $_padding-horizontal: null !default;
   }
 }
 
-.ecl-text-area--m {
+.ecl-text-area--s {
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
+    width: map.get(theme.$form, 's');
   }
+}
 
-  @include breakpoints.up('l') {
+.ecl-text-area--m {
+  width: 100%;
+
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'm');
   }
 }
@@ -74,7 +78,7 @@ $_padding-horizontal: null !default;
 .ecl-text-area--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }
diff --git a/src/implementations/vanilla/components/text-input/_text-input.scss b/src/implementations/vanilla/components/text-input/_text-input.scss
index c79c7310bb5..1321a485cf5 100644
--- a/src/implementations/vanilla/components/text-input/_text-input.scss
+++ b/src/implementations/vanilla/components/text-input/_text-input.scss
@@ -60,13 +60,9 @@ $_padding-horizontal: null !default;
 }
 
 .ecl-text-input--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -75,10 +71,6 @@ $_padding-horizontal: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
@@ -86,7 +78,7 @@ $_padding-horizontal: null !default;
 .ecl-text-input--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }
diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js
index 378994a4d3b..7297db0ef62 100755
--- a/src/playground/addons/story-utils/index.js
+++ b/src/playground/addons/story-utils/index.js
@@ -260,9 +260,9 @@ export const getFormControls = (data, type) => {
         label: { s: 'small', m: 'medium', l: 'large' },
       },
       mapping: {
-        s: 'small',
-        m: 'medium',
-        l: 'large',
+        s: 's',
+        m: 'm',
+        l: 'l',
       },
     };
   }