🐛(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/LabelledBox/index.scss

@@ -15,12 +15,21 @@
     top: 0.5rem;
     transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     color: var(--c--components--forms-labelledbox--label-color--small);
+    // Enable text overflow ellipsis.
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
 
     &.placeholder {
       @extend %text-style;
       top: 16px;
       color: var(--c--components--forms-labelledbox--label-color--big);
     }
+
+    span {
+      white-space: nowrap;
+    }
   }
 
   &__children {

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

@@ -38,7 +38,7 @@ export const LabelledBox = ({
           htmlFor={htmlFor}
           id={labelId}
         >
-          {label}
+          <span>{label}</span>
         </label>
       )}
       <div className="labelled-box__children">{children}</div>