🐛(react) fix DatePicker alignments

Due to the previous changes of LabelledBox that allows it to fit dynamic
height containers, we forgot to update the DatePicker resulting in a broken
CSS alignment.

.changeset/seven-icons-peel.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DatePicker alignments

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

@@ -11,7 +11,7 @@
     border-color: var(--c--components--forms-datepicker--border-color);
     border-style: var(--c--components--forms-datepicker--border-style);
     display: flex;
-    align-items: center;
+
     transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
@@ -25,6 +25,11 @@
     &--clickable {
       cursor: pointer;
     }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__inner {

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

@@ -130,6 +130,7 @@ export const DatePicker = ({
           {state.value && (
             <input type="hidden" name={name} value={state.value?.toString()} />
           )}
+          <div className="c__date-picker__wrapper__icon">
             <Button
               {...{
                 ...otherButtonProps,
@@ -146,6 +147,7 @@ export const DatePicker = ({
               icon={<span className="material-icons">calendar_today</span>}
               disabled={disabled}
             />
+          </div>
           <LabelledBox label={label} labelAsPlaceholder={labelAsPlaceholder}>
             <div className="c__date-picker__inner">
               {!labelAsPlaceholder && (