fix(Datepicker): incr z-index

fix display of datepicker popup by setting highest z-index; namely fixing conflict with headless ui tabs and dialog components

Author: szkieb

src/components/Datepicker.tsx

@@ -333,7 +333,8 @@ const Datepicker: React.FC<DatepickerType> = ({
                 <Input setContextRef={setInputRef} />
 
                 <div
-                    className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
+                    // increase z-index so that datepicker popover is always on top
+                    className="transition-all ease-out duration-300 absolute z-50 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
                     ref={calendarContainerRef}
                 >
                     <Arrow ref={arrowRef} />

src/components/utils.tsx

@@ -123,7 +123,8 @@ export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
     return (
         <div
             ref={ref}
-            className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
+            // increase z-index so that datepicker popover is always on top
+            className="absolute z-40 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
         />
     );
 });