fix(ui): improve DateInput calendar — add stopPropagation, set month/year width, remove duplicate mobile month selector, fix popper z-index

packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx

@@ -42,7 +42,15 @@ export function CalendarHeader({
 
   return (
     <Text asChild color={{ base: 'bg-800', dark: 'bg-100' }}>
-      <Flex align="center" justify="between" px="md" py="sm">
+      <Flex
+        align="center"
+        justify="between"
+        px="md"
+        py="sm"
+        onMouseDown={e => {
+          e.stopPropagation()
+        }}
+      >
         <Button
           disabled={prevMonthButtonDisabled}
           icon="tabler:chevron-left"
@@ -64,6 +72,7 @@ export function CalendarHeader({
             r="md"
             renderContent={value => <Text size="base">{value}</Text>}
             value={dayjs(date).year()}
+            width="min-content"
             onChange={changeYear}
           >
             {years.map(option => (
@@ -77,41 +86,19 @@ export function CalendarHeader({
               dark: colorWithOpacity('bg-700', '50%'),
               darkHover: 'bg-700'
             }}
-            display={{ base: 'none', sm: 'flex' }}
             pl="sm"
             pr="sm"
             py="sm"
             r="md"
             renderContent={value => <Text size="base">{value}</Text>}
             value={months[dayjs(date).month()]}
+            width="16em"
             onChange={value => changeMonth(months.indexOf(value))}
           >
             {months.map(option => (
               <ListboxOption key={option} label={option} value={option} />
             ))}
           </Listbox>
-          <Listbox<string>
-            display={{ base: 'flex', sm: 'none' }}
-            pr="xl"
-            py="sm"
-            r="md"
-            renderContent={value => (
-              <Text size="base" weight="medium">
-                {value.slice(0, 3)}
-              </Text>
-            )}
-            style={{ paddingLeft: '0.75rem' }}
-            value={months[dayjs(date).month()]}
-            onChange={value => changeMonth(months.indexOf(value))}
-          >
-            {months.map(option => (
-              <ListboxOption
-                key={option}
-                label={option.slice(0, 3)}
-                value={option}
-              />
-            ))}
-          </Listbox>
         </Flex>
         <Button
           disabled={nextMonthButtonDisabled}

packages/ui/src/components/inputs/DateInput/index.css

@@ -202,3 +202,8 @@
 .react-datepicker-wrapper {
   width: 100% !important;
 }
+
+
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}

packages/ui/src/components/inputs/DateInput/index.tsx

@@ -114,7 +114,6 @@ export function DateInput({
               placeholderText={`August 7, ${dayjs().year()}${
                 hasTime ? ' 08:07 AM' : ''
               }`}
-              popperClassName="-mx-13"
               popperPlacement="bottom-start"
               portalId="app"
               renderCustomHeader={(props: {