✨(react) use css float for multi select

Previously the pills were not stacking under the actions div, now we can
do it using the forgotten CSS float feature.

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

@@ -218,14 +218,6 @@
           gap: 0.25rem;
           margin-right: 0.25rem;
           margin-bottom: 0.25rem;
-          max-width: var(--c--components--forms-select--multi-pill-max-width);
-
-          > span {
-            min-width: 0;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-          }
 
           &__clear {
             width: auto;
@@ -239,12 +231,6 @@
 
         &__input {
           display: inline-grid;
-          width: 0;
-          overflow: hidden;
-
-          &:focus-within {
-            width: auto;
-          }
 
           &::after,
           input {

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -92,9 +92,14 @@ export const SelectMonoAux = ({
       fullWidth={fullWidth}
     >
       <div
-        className={classNames("c__select", "c__select--" + state, {
-          "c__select--disabled": disabled,
-        })}
+        className={classNames(
+          "c__select",
+          "c__select--mono",
+          "c__select--" + state,
+          {
+            "c__select--disabled": disabled,
+          }
+        )}
       >
         {/* We disabled linting for this specific line because we consider that the onClick props is only used for */}
         {/* mouse users, so this do not engender any issue for accessibility. */}