From 29b58ed1a6487ab3f90f7bb79d22b3851f183724 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 15 Jun 2023 16:03:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20use=20css=20float=20for=20mu?=
 =?UTF-8?q?lti=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the pills were not stacking under the actions div, now we can
do it using the forgotten CSS float feature.
---
 .../react/src/components/Forms/Select/index.scss   | 14 --------------
 .../src/components/Forms/Select/mono-common.tsx    | 11 ++++++++---
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index faf0540..77a39ff 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/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 {
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index e425004..c2098c3 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/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. */}