♻️(react) parents of LabelledBox must be flex

Previously we enforced the height of the LabelledBox div with height: 100%, but
if the parent container of LabelledBox had an auto height this wasn't working
anymore. Setting height: 100% to a child works only if its parent has a fixed
height. In our situation we needed the LabelledBox to work for the multi select
which has a auto growing height. To solve this issue we just have to force the
parent containers of LabelledBox to display flex in order for it to stretches
its children to take all of its height, including LabelledBox div.

packages/react/src/components/Forms/Input/index.scss

@@ -5,7 +5,6 @@
   border-style: var(--c--components--forms-input--border-style);
   background-color: var(--c--components--forms-input--background-color);
   display: flex;
-  align-items: center;
   transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
   padding: 0 1rem;
   gap: 1rem;
@@ -29,6 +28,12 @@
     background-color: transparent;
     @extend %text-style;
 
+    &__icon-left,
+    &__icon-right {
+      display: flex;
+      align-items: center;
+    }
+
     &--medium {
       min-width: 150px;
     }

packages/react/src/components/Forms/Input/index.tsx

@@ -106,7 +106,7 @@ export const Input = forwardRef<InputRefType, Props>(
             inputRef.current?.focus();
           }}
         >
-          {!!icon && icon}
+          {!!icon && <div className="c__input__icon-left">{icon}</div>}
           <LabelledBox
             label={label}
             htmlFor={idToUse.current}
@@ -133,7 +133,9 @@ export const Input = forwardRef<InputRefType, Props>(
               ref={inputRef}
             />
           </LabelledBox>
-          {!!rightIcon && rightIcon}
+          {!!rightIcon && (
+            <div className="c__input__icon-right">{rightIcon}</div>
+          )}
         </div>
       </Field>
     );

packages/react/src/components/Forms/LabelledBox/index.scss

@@ -1,5 +1,4 @@
 .labelled-box {
-  height: 100%;
   width: 100%;
   position: relative;
   box-sizing: border-box;