Page MenuHomePhabricator

Dialog.vue: Align popup in the center when the left side menu is open
Closed, ResolvedPublic

Description

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:

Screen Shot 2022-11-22 at 12.45.12 PM.png (865×1 px, 148 KB)

With menu closed:
Screen Shot 2022-11-22 at 12.44.34 PM.png (892×1 px, 108 KB)

  • Small screens/mobile: ...

Completion checklist

Event Timeline

Change 859553 had a related patch set uploaded (by Dani DW; author: Dani DW):

[mediawiki/extensions/WikiLambda@master] Styling tweaks to Publish Component, per aalhazwani@

https://gerrit.wikimedia.org/r/859553

Change 859553 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Styling tweaks to Publish Component, per aalhazwani@

https://gerrit.wikimedia.org/r/859553