🐛(react) fix inputs overflowing placeholder

The oveflowing labels were spreading on two lines. I had to wrap a
span inside a label in order to be able to deal with the text-oveflow
plus the absolute positionning.

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

@@ -21,6 +21,8 @@
 
     label {
       cursor: pointer;
+      // In case of text-overflow we do not want the text to render above the toggle button arrow.
+      max-width: calc(100% - 1.5rem);
     }
 
     &:hover {

packages/react/src/components/Forms/Select/mono.spec.tsx

@@ -868,7 +868,7 @@ describe("<Select/>", () => {
       const menu: HTMLDivElement = screen.getByRole("listbox", {
         name: "City",
       });
-      const label = screen.getByText("City");
+      const label = screen.getByText("City")!.parentElement!;
       const valueRendered = document.querySelector(".c__select__inner__value");
 
       // Make sure no value is rendered.
@@ -1445,7 +1445,7 @@ describe("<Select/>", () => {
       screen.getByRole("combobox", {
         name: "City",
       });
-      const label = screen.getByText("City");
+      const label = screen.getByText("City")!.parentElement!;
       expect(Array.from(label.classList)).toContain("offscreen");
     });
 

packages/react/src/components/Forms/Select/multi.spec.tsx

@@ -50,7 +50,7 @@ describe("<Select multi={true} />", () => {
       const menu: HTMLDivElement = screen.getByRole("listbox", {
         name: "Cities",
       });
-      const label = screen.getByText("Cities");
+      const label = screen.getByText("Cities")!.parentElement!;
 
       // Expect no options to be selected.
       expectSelectedOptions([]);
@@ -721,7 +721,7 @@ describe("<Select multi={true} />", () => {
       screen.getByRole("combobox", {
         name: "Cities",
       });
-      const label = screen.getByText("Cities");
+      const label = screen.getByText("Cities")!.parentElement!;
       expect(Array.from(label.classList)).toContain("offscreen");
     });