Optimizing the life cycle dialog

[ulferts]

Ticket

https://community.openproject.org/wp/60330

What are you trying to accomplish?

Improve the UX of date pickers in modals i.e. on the lifecycle modal:

• The date picker can now reach out of the modal which prevents the modal needing to increase and the user to scroll to the added content

Screenshots

What approach did you choose and why?

The approach is to append the date picker to the modal. However, that is not enough. The date picker dom element also needs to be leveraged to the top-layer which is done right after opening the date picker. Positioning can easily be fixed by removing their top margin.

Because of the backdrop added when moving the date picker to the top layer, this move to the top layer needs to be repeated also when the input is clicked on again as that is treated as a click on the backdrop which removes an item from the top layer.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)