Let wide InputGroups honor the minimum input width and overflow hor…

…izontally (#522)

Since form inputs can have a fixed minimum size (and they have it by default),
`InputGroup` should overflow horizontally if its content doesn't fit the available
width. This limits the usage of `InputGroup` in narrow containers and on mobile
screens at the moment, but prevents a bug when components inside a shrinked
`InputGroup` would overlap each other.

Closes #522.

src/components/InputGroup/InputGroup.module.scss

@@ -1,7 +1,9 @@
 // 1. The class name is intentionally singular because it's targeted by other mixins too.
 // 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
-// 3. Prevent individual inputs from overlapping inside narrow containers.
-// 4. Legends are tricky to style, let's use a `div` instead.
+// 3. Let wide input groups honor the minimum input width and overflow horizontally without wrapping and distorting
+//    the inputs.
+// 4. Prevent individual inputs from overlapping inside narrow containers.
+// 5. Legends are tricky to style, let's use a `div` instead.
 //    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
 
 @use "../../styles/tools/form-fields/box-field-elements";
@@ -19,12 +21,12 @@
         @include foundation.fieldset();
     }
 
-    // 4.
+    // 5.
     .legend {
         @include accessibility.hide-text();
     }
 
-    // 4.
+    // 5.
     .label {
         @include foundation.label();
     }
@@ -63,11 +65,13 @@
     .isRootLayoutVertical,
     .isRootLayoutHorizontal {
         @include box-field-layout.vertical();
+
+        max-width: none; // 3.
     }
 
     .isRootLayoutVertical .field,
     .isRootLayoutHorizontal .field {
-        max-width: none; // 3.
+        max-width: none; // 4.
     }
 
     .isRootLayoutHorizontal {