From 49dddaa0f04b361ee1e86c853ad9be44d2b60478 Mon Sep 17 00:00:00 2001
From: LeonardJouve <leonard.jouve@infomaniak.com>
Date: Wed, 19 Jul 2023 20:36:16 +0200
Subject: [PATCH] Fix props of 'react-day-picker' #23591)

---
 .../components/date_picker/date_picker.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/date_picker/date_picker.tsx b/webapp/channels/src/components/date_picker/date_picker.tsx
index f89bdc3593..d00378477b 100644
--- a/webapp/channels/src/components/date_picker/date_picker.tsx
+++ b/webapp/channels/src/components/date_picker/date_picker.tsx
@@ -34,11 +34,11 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
     const {x, y, reference, floating, strategy, context} = useFloating({
         open: isPopperOpen,
         onOpenChange: () => handlePopperOpenState(false),
-        placement: 'bottom',
+        placement: 'bottom-start',
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(5),
-            flip({fallbackPlacements: ['bottom', 'right'], padding: 5}),
+            flip({fallbackPlacements: ['bottom-end', 'top-start', 'top-end', 'right-start', 'left-start'], padding: 5}),
             shift(),
         ],
     });
@@ -82,23 +82,23 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
                 >
                     <div
                         ref={floating}
+                        style={{
+                            position: strategy,
+                            top: y ?? 0,
+                            left: x ?? 0,
+                            width: 'auto',
+                            zIndex: 999,
+                        }}
+                        {...getFloatingProps()}
                     >
                         <DayPicker
                             {...datePickerProps}
-                            style={{
-                                position: strategy,
-                                top: y ?? 0,
-                                left: x ?? 0,
-                                width: 'auto',
-                                zIndex: 999,
-                            }}
                             className='date-picker__popper'
                             locale={loadedLocales[locale]}
                             components={{
                                 IconRight: iconRight,
                                 IconLeft: iconLeft,
                             }}
-                            {...getFloatingProps}
                         />
                     </div>