📱(react) improve DateRangerPicker responsive

The component was not able to resize properly on narrow screens.

.changeset/nine-pots-fold.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+improve DateRangerPicker responsive

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

@@ -1,5 +1,5 @@
 @use 'src/utils' as *;
-
+@use "../../../utils/responsive" as *;
 
 .c__date-picker {
   position: relative;
@@ -222,12 +222,48 @@
 
   &__range {
     $component-min-width: px-to-rem(350px);
-    min-width: $component-min-width;
+
+    // MUST READ:
+    // We can only use @container property for full-width fields, as the container-type: inline-size property
+    // should not be based on the children's width. We cannot at the same time use container-type and a default
+    // width.
+    // So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
 
     &__container {
-      min-width: $component-min-width;
+
+      &:not(.c__field--full-width) {
+        min-width: $component-min-width;
+
+        @include media(sm) {
+          min-width: auto;
+
+          .c__date-picker__wrapper__icon {
+            display: none;
+          }
+        }
+      }
+
+      &.c__field--full-width {
+
+        .c__date-picker__wrapper {
+          // The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
+          // not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
+          // context.
+          container-type: inline-size;
+        }
+
+        @container (max-width: #{$component-min-width}) {
+
+          .c__date-picker__wrapper__icon {
+            display: none;
+          }
+        }
+      }
     }
 
+
+
+
     &__separator {
       background-color: var(--c--theme--colors--greyscale-400);
       height: px-to-rem(24px);

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

@@ -212,3 +212,34 @@ export const RangeControlled = () => {
     </>
   );
 };
+
+export const RangeControlledFull = () => {
+  const [value, setValue] = useState<[string, string] | null>([
+    "2023-05-23T13:37:00.000+02:00",
+    "2023-06-23T13:37:00.000+02:00",
+  ]);
+  return (
+    <>
+      <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"
+          minValue="2023-01-23T00:00:00.000+00:00"
+          maxValue="2023-08-23T00:00:00.000+00:00"
+          value={value}
+          onChange={(e) => setValue(e)}
+          fullWidth={true}
+        />
+        <Button onClick={() => setValue(null)}>Reset</Button>
+      </div>
+    </>
+  );
+};