From 4c4f6c80958c9ab0288f180d7a4defe31382cf20 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Fri, 29 Nov 2024 12:04:51 +0100
Subject: [PATCH] Let wide `InputGroup`s honor the minimum input width and
 overflow horizontally (#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 | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/InputGroup/InputGroup.module.scss b/src/components/InputGroup/InputGroup.module.scss
index 0c6d80e1..16ac95eb 100644
--- a/src/components/InputGroup/InputGroup.module.scss
+++ b/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 {