🩹(react) fix DateRangePicker layout overflow

Resolved a width conflict in the date range picker where the field width
conflicted with the component's min-width. This caused content
overflow in the field container, resulting in layout issues.

.changeset/tidy-beds-attack.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DateRangePicker layout overflow

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

@@ -46,6 +46,7 @@ export type DatePickerAuxProps = PropsWithChildren &
     isFocused: boolean;
     labelAsPlaceholder: boolean;
     optionalClassName?: string;
+    isRange?: boolean;
     onClear: () => void;
   };
 
@@ -67,6 +68,7 @@ const DatePickerAux = forwardRef(
       locale,
       disabled = false,
       optionalClassName,
+      isRange,
       ...props
     }: DatePickerAuxProps,
     ref: Ref<HTMLDivElement>,
@@ -82,7 +84,12 @@ const DatePickerAux = forwardRef(
 
     return (
       <I18nProvider locale={locale || currentLocale}>
-        <Field {...props}>
+        <Field
+          {...props}
+          className={classNames({
+            "c__date-picker__range__container": isRange,
+          })}
+        >
           <div
             ref={pickerRef}
             className={classNames(["c__date-picker", optionalClassName], {

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

@@ -80,6 +80,7 @@ export const DateRangePicker = ({
         pickerState,
         pickerProps,
         optionalClassName: "c__date-picker__range",
+        isRange: true,
         onClear: () => {
           pickerState.setValue({
             start: null as unknown as DateValue,

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

@@ -221,7 +221,12 @@
   }
 
   &__range {
-    min-width: px-to-rem(350px);
+    $component-min-width: px-to-rem(350px);
+    min-width: $component-min-width;
+
+    &__container {
+      min-width: $component-min-width;
+    }
 
     &__separator {
       background-color: var(--c--theme--colors--greyscale-400);

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

@@ -189,8 +189,16 @@ export const RangeControlled = () => {
     "2023-06-23T13:37:00.000+02:00",
   ]);
   return (
-    <div>
+    <>
       <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "1rem",
+          marginTop: "1rem",
+        }}
+      >
         <DateRangePicker
           startLabel="Start date"
           endLabel="Due date"
@@ -201,5 +209,6 @@ export const RangeControlled = () => {
         />
         <Button onClick={() => setValue(null)}>Reset</Button>
       </div>
+    </>
   );
 };