Reposition the modal after the calendar is drawn since it affects the modal height and could thus overlap the window border in some cases

frontend/src/app/shared/components/datepicker/datepicker.modal.ts

@@ -55,10 +55,8 @@ import {
 } from 'flatpickr/dist/types/instance';
 import flatpickr from 'flatpickr';
 import { DatepickerModalService } from 'core-app/shared/components/datepicker/datepicker.modal.service';
-import {
-  map,
-  take,
-} from 'rxjs/operators';
+import { take } from 'rxjs/operators';
+import { activeFieldContainerClassName } from 'core-app/shared/components/fields/edit/edit-form/edit-form';
 
 export type DateKeys = 'date'|'start'|'end';
 
@@ -247,6 +245,7 @@ export class DatePickerModalComponent extends OpModalComponent implements AfterV
         inline: true,
         onReady: (selectedDates, dateStr, instance) => {
           this.toggleDisabledState(instance);
+          this.reposition(jQuery(this.modalContainer.nativeElement), jQuery(`.${activeFieldContainerClassName}`));
         },
         onChange: (dates:Date[]) => {
           this.handleDatePickerChange(dates);

spec/features/work_packages/table/scheduling/manual_scheduling_spec.rb

@@ -98,6 +98,7 @@ describe 'Manual scheduling', js: true do
 
       start_date.toggle_scheduling_mode
       start_date.expect_scheduling_mode manually: true
+      start_date.expect_calendar
 
       # Expect not editable
       start_date.within_modal do

spec/support/edit_fields/date_edit_field.rb

@@ -89,6 +89,12 @@ class DateEditField < EditField
     expect(page).to have_no_selector("#{modal_selector} #{input_selector}")
   end
 
+  def expect_calendar
+    within_modal do
+      expect(page).to have_selector(".flatpickr-calendar")
+    end
+  end
+
   def update(value, save: true, expect_failure: false)
     # Retry to set attributes due to reloading the page after setting
     # an attribute, which may cause an input not to open properly.