### Steps to reproduce

1. Go to a work package whose dates can be modified on a mobile defice
2. Open the date picker by clicking on the dates field in a work package form

### What is the buggy behavior?

* The date picker is not rendered correctedly:
* The date picker does not make use of the full width available to it
* The date picker Begin of the deletion behaves oddly when the internal contents are scrolled (the heightEnd of the deletion is Begin of the insertionanchored to the top edge of the screen.End of the insertion Begin of the deletion affected)
* The _Scheduling_ and _Working days_ toggle sets are not stacked vertically
* The _Start date_ and _Finish date_ are invisible without scroll, and loEnd of the deletion

<img class="op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:419px;" src="/api/v3/attachments/38887/content">End of the insertion Begin of the deletion style="width:372px;" src="/api/v3/attachments/38535/content">End of the deletion

###

### Begin of the deletion Screenshots and other files

Screencast showing datepicker on mobile Firefox on iOS:

<img class="op-uc-image op-uc-image_inline" style="width:365px;" src="/api/v3/attachments/38537/content">

###End of the deletion What is the expected behavior?

The date picker is rendered correctly:

* The date picker makes use of the full width available to it, vertically and Begin of the insertionhorizontally. It should be centered on the viewport.End of the insertion Begin of the deletion horizontallyEnd of the deletion
* The date picker Begin of the insertionis displayed with a dark backgroundEnd of the insertion Begin of the deletion does not change dimensions when the internal contents are scrolled
* The _Scheduling_End of the deletion and Begin of the insertionhas a consistent margin all around (same as other modals like _Include projects_End of the insertion Begin of the deletion _Working days_ toggle sets are stacked vertically
* The _Start date_End of the deletion and Begin of the insertion_Project select,_ but without a close button).End of the insertion Begin of the deletion _Finish date_ are visible and look and behave normallyEnd of the deletion

The mobile version should be arranged like Begin of the insertionthis:End of the insertion Begin of the deletion this (from specs):End of the deletion

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/38884/content">End of the insertion Begin of the deletion src="/api/v3/attachments/38538/content">End of the deletion

When vertical space is not enough, it should behave like this, so that the action bar on top:

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/38885/content">

End of the insertion Begin of the deletion src="/api/v3/attachments/38539/content">



End of the deletion ###

### Environment information

**OpenProject version**

OpenProject 12.3.0 (9c9f3460) on Edge

**Browser**

* [ ] Chrome
* [ ] Firefox
* [ ] Safari
* [x] Mobile Safari
* [x] Other (please specify)
* [x] Mobile Begin of the insertionFirefoxEnd of the insertion Begin of the deletion Firefox End of the deletion

**Language**

EN