Description
Currently the dialog modal appears in the center of the screen when the left-side menu is closed. However, it is off to the right once the menu is opened.
We are using flexbox justify-content:center for the horizontal alignment. But because the left-side menu is not part of the Vue App, it is not including it in the calculation when it is opened, even though the "app" gets shifted on the screen.
I had a play but was unable to figure a solution without a bad negative pixel hack,
Desired behavior/Acceptance criteria
The modal would be centered to the view, regardless of the sidebar menu being open/closed.
Devices and Design (URLs or screenshots)
- Desktop: ...
With menu open:
With menu closed:
- Small screens/mobile: ...
Completion checklist
- Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist