🩹(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.

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

@@ -189,17 +189,26 @@ export const RangeControlled = () => {
     "2023-06-23T13:37:00.000+02:00",
   ]);
   return (
-    <div>
+    <>
       <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
-      <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)}
-      />
-      <Button onClick={() => setValue(null)}>Reset</Button>
-    </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)}
+        />
+        <Button onClick={() => setValue(null)}>Reset</Button>
+      </div>
+    </>
   );
 };