From 3b13bcae65c42095a5e358938df828c1b592a5d6 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Tue, 20 Jun 2023 17:48:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20adjust=20the=20calendar?=
 =?UTF-8?q?=20width=20with=20a=20full=20width=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Establish a maximum width for the calendar that slightly
exceeds the Figma design, allowing for optimal display
of most timezone locales without expanding to fit the full
width input.
---
 packages/react/src/components/Forms/DatePicker/index.scss | 1 +
 .../src/components/Forms/DatePicker/index.stories.tsx     | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index e22b5da..3a4e26e 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -213,6 +213,7 @@
 .c__calendar {
   display: block;
   transform: translate(2px, 0);
+  max-width: px-to-rem(340px);
 
   &__wrapper {
     display: block;
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 059226c..7757545 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -87,6 +87,14 @@ export const WithText = {
   },
 };
 
+export const Fullwidth = {
+  render: Template,
+  args: {
+    defaultValue: "2023-05-24",
+    fullWidth: true,
+  },
+};
+
 export const Controlled = () => {
   const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
   return (