fix: Date Override Modal Trims Date Picker (#14680)

* [CAL-3500] Date Override Modal Trims Date Picker #14658

* file

* type fix

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

packages/features/schedules/components/Schedule.tsx

@@ -290,7 +290,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 disabled={disabled}
                 data-testid="add-time-availability"
                 tooltip={labels?.addTime ?? t("add_time_availability")}
-                className="text-default mx-2 "
+                className="text-default mx-2"
                 type="button"
                 color="minimal"
                 variant="icon"
@@ -356,15 +356,20 @@ const TimeRangeField = ({
   onChange,
   disabled,
   userTimeFormat,
-}: { className?: string; disabled?: boolean; userTimeFormat: number | null } & ControllerRenderProps) => {
+}: {
+  className?: string;
+  disabled?: boolean;
+  userTimeFormat: number | null;
+} & ControllerRenderProps) => {
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
     <div className={classNames("flex flex-row gap-1", className)}>
       <LazySelect
         userTimeFormat={userTimeFormat}
-        className="inline-block w-[100px]"
+        className="flex w-[100px]"
         isDisabled={disabled}
         value={value.start}
+        menuPlacement="bottom"
         max={value.end}
         onChange={(option) => {
           onChange({ ...value, start: new Date(option?.value as number) });
@@ -377,6 +382,7 @@ const TimeRangeField = ({
         isDisabled={disabled}
         value={value.end}
         min={value.start}
+        menuPlacement="bottom"
         onChange={(option) => {
           onChange({ ...value, end: new Date(option?.value as number) });
         }}
@@ -390,6 +396,7 @@ const LazySelect = ({
   min,
   max,
   userTimeFormat,
+  menuPlacement,
   ...props
 }: Omit<Props<IOption, false, GroupBase<IOption>>, "value"> & {
   value: ConfigType;
@@ -411,6 +418,7 @@ const LazySelect = ({
         if (min) filter({ offset: min });
         if (max) filter({ limit: max });
       }}
+      menuPlacement={menuPlacement}
       value={options.find((option) => option.value === dayjs(value).toDate().valueOf())}
       onMenuClose={() => filter({ current: value })}
       components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}

packages/ui/components/form/select/Select.tsx

@@ -21,7 +21,6 @@ export const Select = <
   Group extends GroupBase<Option> = GroupBase<Option>
 >({
   components,
-  menuPlacement,
   variant = "default",
   ...props
 }: SelectProps<Option, IsMulti, Group> & {
@@ -36,7 +35,7 @@ export const Select = <
     menuList?: string;
   };
 }) => {
-  const { classNames, innerClassNames, ...restProps } = props;
+  const { classNames, innerClassNames, menuPlacement = "auto", ...restProps } = props;
   const reactSelectProps = React.useMemo(() => {
     return getReactSelectProps<Option, IsMulti, Group>({
       components: components || {},
@@ -49,6 +48,7 @@ export const Select = <
   return (
     <ReactSelect
       {...reactSelectProps}
+      menuPlacement={menuPlacement}
       classNames={{
         input: () => cx("text-emphasis", innerClassNames?.input),
         option: (state) =>
@@ -84,7 +84,7 @@ export const Select = <
           ),
         menu: () =>
           cx(
-            "rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
+            " rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
             innerClassNames?.menu
           ),
         groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",