Page MenuHomePhabricator
Create Task
Maniphest T343303

Dialogs are displayed behind the MediaWiki/Vector header
Closed, DuplicatePublic
Actions

Description

The dialog (z-index?) is lower compared to the header. This happens for all the dialogs: about widget dialog, details dialog, publish dialog, discard changes dialog, etc.

image.png (1×2 px, 395 KB)

While reaching out for help, the design system team suggested the following approach:

In T341944#9059985, @egardner wrote:

Related T337384: Label box optimizations

A given Dialog might appear deeply embedded inside a larger DOM structure (like a MediaWiki page). To prevent anything from colliding or overlapping, you can use Vue's built-in Teleport component to render a given component (in this case, Dialog) to another part of the page while otherwise keeping the Vue component hierarchy intact.

A basic approach would look like this:

<div class="my-feature">
    <button @click="open = true">Launch dialog</button>

    <teleport to="body">
        <cdx-dialog
	    v-model:open="open"
	    title="Save changes"
	    close-button-label="Close"
	    :primary-action="primaryAction"
	    :default-action="defaultAction"
	    @primary="onPrimaryAction"
	    @default="open = false"
        >
	    <p>Do you want to save your changes?</p>
        </cdx-dialog>
    </teleport>
</div>

You could also write <teleport to="#some-other-element">. Vue will append the dialog to the selected element when it renders.

Let's see if this solves the bug – if so we can update Codex documentation to make these directions prominent for on-wiki usage.

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedNoneT337384 Label box optimizations
 DuplicateNoneT343303 Dialogs are displayed behind the MediaWiki/Vector header

Event Timeline

AAlhazwani-WMF created this task.Aug 2 2023, 9:49 AM
AAlhazwani-WMF attached a referenced file: F37159767: image.png. (Show Details)
AAlhazwani-WMF mentioned this in T337384: Label box optimizations.
egardner added a subscriber: Catrope.Aug 2 2023, 6:25 PM

Hey @AAlhazwani-WMF, here's. a little more info we discovered yesterday while investigating this:

In T341944#9061177, @Catrope wrote:
In T341944#9060858, @egardner wrote:

.vector-body applies a font-size: calc(1em * 0.875) to all of its descendants (including the Dialog). This changes both the font size as well as the overall width of the dialog. I think that if you re-apply this style to wherever the Dialog ends up teleporting to, you'll see something that more closely resembles what you want.

I remember this from OOUI: we also added a div at the bottom of the body to put dialogs in (except I think we added it from JS, rather than in the HTML), and in Vector we also had to style that with font-size: 0.875em; to get the sizes of things to work correctly. Vector's approach to font sizes is strange: it sets the root font size to 16px, but then almost in every place where text could appear it's set to 14px, using various font-size: 0.875em; rules. Long-term, I hope this can be fixed in Vector as part of the font size changes the Web team is planning for this year.

.vector-feature-zebra-design-disabled .vector-body seems to be the source of the z-index collision, because this rule applies the styles position:relative and z-index: 0. This z-index rule is causing the collision – if you disable it, the dialog works fine in it's original position.

I think this rule probably originates from T40848 or a similar concern. For special pages it's probably not that important to prevent things in the "content" area from breaking out into the "interface" area because most special pages are more like interface than like content; but for user-generated content pages, it will continue to be necessary. Teleporting is probably the easiest solution.

So Vector is applying some CSS styles to elements of the page body where these dialogs are getting created. You may or may not want the style overrides (for example, you might want to keep the font-size rule. The z-index:0 rule which gets applied to the body means you will probably have to rely on <teleport> when launching Codex Dialogs from a page content area.

A proper solution to this issue may involve changing MW Core or Vector to add a suitable element at the end of the <body> tag that receives appropriate styles from the content part of the page, in case a dialog needs to be displayed. In the meantime, you can probably set up such a target div yourself in any special page or extension that needs this.

egardner closed this task as a duplicate of T343476: Ensure that Codex Dialogs are compatible with Vector.Aug 3 2023, 5:04 PM

I've filed an upstream task to fix the issues in Vector and/or MW core over at T343476 and have merged this one into it.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits