Maniphest T341944

Mentor dashboard Personalized praise settings view - overlapping and misbehavior of the drop-down
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Zapipedia-WMF
	Jul 16 2023, 1:14 PM

Description

Steps to replicate the issue (include links if applicable):

In the mentor dashboard personalized praise module, clic on the Settings icon to open the Settings view.
Try to make bigger or smaller the screen and see where the elements of the Settings view are placed.
Also, try to change the notifications frequency. Again, change the size of the screen to see how it behaves.

What happens?:

See this video:

The settings view of the new dashboard module is overlapping other elements of the screen.
In the notifications frequency drop-down, is not possible to view correctly all the options, depending on the size of the window you can see all of them, none of them or just a few of them.
Sometimes, the closing icon (x) is not working.

What should have happened instead?:

Settings view elements should not overlapped with other elements of the page, the closing icon should close the view and the notifications drop-down should show all the options, regardless screen size.

Other information (browser name/version, screenshots, etc.):

This is happening both in Vector 2022 and Legacy Vector.
It is also happening in mobile (see the video attached below).
Tested in Firefox (desktop) and Safari (mobile)

Mobile_SettingsView.mp42 MBDownload

Details

	Subject	Repo	Branch	Lines +/-
	[WIP] WORKING, somehow: Mentor dashboard: Prevent the dialog from interfering with skin control items	mediawiki/extensions/GrowthExperiments	master	+37 -13
	[WIP] NOT WORKING: Mentor dashboard: Prevent the dialog from interfering with skin	mediawiki/extensions/GrowthExperiments	master	+19 -12

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	BUG REPORT	egardner	T343476 Ensure that Codex Dialogs are compatible with Vector
Resolved	BUG REPORT	Etonkovidova	T341944 Mentor dashboard Personalized praise settings view - overlapping and misbehavior of the drop-down
Resolved		Sgs	T345308 [minor] Praise-worthy mentees dialogs line height/spacing adjustments

Event Timeline

Zapipedia-WMF created this task.Jul 16 2023, 1:14 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 16 2023, 1:14 PM

Maintenance_bot added a project: GrowthExperiments-Mentorship.Jul 16 2023, 1:30 PM

This seems to be a fairly significant issue, although it can be workarounded by the Cancel button (or clicking outside of the dialog). Moving to sprint.

In Vector 2022, lowering the z-index assigned to .vector-feature-zebra-design-disabled .mw-header "fixes" this in Vector, but the issue would be visible in other skins anyway. This also looks like a Codex issue rather than an issue in GrowthExperiments itself.

Maintenance_bot moved this task from New Tasks to In Progress on the GrowthExperiments-Mentorship board.Jul 18 2023, 5:29 PM

Urbanecm_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Jul 18 2023, 6:18 PM

Urbanecm_WMF updated the task description. (Show Details)Aug 1 2023, 4:08 PM

egardner added a project: Design-System-Team (Design-Systems-Sprint-5).Aug 1 2023, 4:11 PM

Seems to be caused within Codex (especially since a similar issue happens within Wikifunctions as well). Started a conversation in the talk-to-DST channel.

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-Systems-Sprint-5). · View Herald TranscriptAug 1 2023, 4:14 PM

(re-adding the project added by Eric)

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.

egardner edited projects, added Design-System-Team; removed Design-System-Team (Design-Systems-Sprint-5).Aug 1 2023, 7:06 PM

egardner moved this task from Inbox to Following on the Design-System-Team board.

Change 944312 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Mentor dashboard: Prevent PersonalizedPraiseSettings from overflowing

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

Change 944313 had a related patch set uploaded (by Urbanecm; author: Urbanecm):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Mentor dashboard: Prevent the dialog from interfering with skin control items

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

Test wiki created on Patch demo by Martin Urbanec (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c7e918185c/w

Test wiki created on Patch demo by Martin Urbanec (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/67c1542495/w

Thanks @egardner for the T341944#9059985 tips. It seems to be fairly tricky to get the dialog's div to a correct place – one needs to break out of mw-page-container for it to work, which means both OutputPage::addHtml and BeforePageDisplayHook don't work (in 944313, I resorted to SkinAfterBottomScriptsHook, which gets the div where I want it to be, but I feel like I'm abusing it for something other than it was originally intended for).

Even with the wrapping div in the correct place, the dialog seems to stop respecting certain styles that seem to be MediaWiki/skin provided (in addition to ignoring GrowthExperiments-provided CSS, which is understandable, as it appears elsewhere). This is understandable, given we're breaking out of the mw-page-container, but it's not desirable outcome as part of fixing this task. An example is the font-size of the text, including in button labels (which is something that I don't think we were overriding):


With patch	Without patch (`testwiki wmf.20`)

This difference is clearly caused by breaking out of the mw-page-container wrapping div, which exempts the dialog from styles introduced by MediaWiki/skin. This can be shown via the two patchdemos linked below and comparing the style differences in them (one has div inside mw-page-container, other one outside), see GIF attached below:

The patchdemos with the two patches I uploaded below are available here (login as Patch Demo / patchdemo1 and click the cog icon in top right, under Send praise) :

To conclude, I think even to regular dialog users (without the need to override default h2/h3/h4 behaviour as we do), the div at the end of <body> solution isn't likely to work well, because of the missing core-provided skins. Regardless of whether we end up using <teleport> when working with Codex dialogs, I think the dialog needs to be working when invoked within mw-page-container, or if that's not possible, a way to apply normal MediaWiki/skin-provided stylesheets for individual items outside of mw-page-container.

@egardner Do you please have any thoughts on those issues I ran into?

Thanks @Urbanecm_WMF for the detailed write-up and the patchdemo links. I don't have any immediate solution this time around, but I think you've provided enough information for DST to think about how we want Codex styles to interact with MediaWiki-provided ones in this case.

I think that both the initial bug (z-index mismatch) and the the problems with using teleport as a work-around come from the styles being applied by the vector-body class.

.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.

.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.

CCiufo-WMF edited projects, added Design-System-Team (Design-Systems-Sprint-5); removed Design-System-Team.Aug 1 2023, 9:00 PM

CCiufo-WMF set the point value for this task to 2.

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.

AAlhazwani-WMF mentioned this in T343303: Dialogs are displayed behind the MediaWiki/Vector header.Aug 2 2023, 9:49 AM

ovasileva subscribed.Aug 3 2023, 4:51 PM

I've filed an upstream bug about addressing this issue in Vector / MW core here: T343476

Boldly reopening, to make the bug trackable on Growth team's board. This bug is sort of resolvable separately (even if it introduces a workaround/hack). Making a subtask of T343476 instead.

Urbanecm_WMF added a parent task: T343476: Ensure that Codex Dialogs are compatible with Vector.Aug 7 2023, 11:41 AM

CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (Design-Systems-Sprint-5).Aug 14 2023, 4:54 PM

Blocked on the parent (where a long term solution is to be determined).

Catrope mentioned this in T344776: Menus should not extend past the bottom of the screen.Aug 22 2023, 11:30 PM

The bug where some of the dropdown options are inaccessible is T344776. In the video taken on mobile, scrolling the dialog causes the dropdown menu to become detached from the dropdown; this is T344542.

AnneT mentioned this in T345095: Triage open Codex bugs.Aug 29 2023, 2:20 PM

So, this is somewhat fixed as part of the parent task. Now the interface looks terribly (see below), but it works in terms of overlapping. We need to update our styles to meet the new dialog location. It might be also needed to check other usages of cdx-dialog (atm, seems to be only Personalized praise) and update them.

In T341944#9129037, @Urbanecm_WMF wrote:

Now the interface looks terribly (see below)

Due to Phabricator permissions issues I can't see the screenshot :(

In T341944#9129454, @Catrope wrote:

In T341944#9129037, @Urbanecm_WMF wrote:

Now the interface looks terribly (see below)

Due to Phabricator permissions issues I can't see the screenshot :(

Should be fixed, apologies.

Yeah it looks like this is because headers and paragraphs are no longer getting styled by the skin because they're no longer inside .vector-body or whatever other class Vector uses to style them. We might want to fix this in Vector by styling the dialog container with the same styles.

Urbanecm_WMF added a subtask: T345308: [minor] Praise-worthy mentees dialogs line height/spacing adjustments.Aug 31 2023, 10:21 AM

Urbanecm_WMF mentioned this in T345308: [minor] Praise-worthy mentees dialogs line height/spacing adjustments.

Sgs changed the status of subtask T345308: [minor] Praise-worthy mentees dialogs line height/spacing adjustments from Open to In Progress.Sep 28 2023, 10:53 AM

Urbanecm_WMF changed the status of subtask T345308: [minor] Praise-worthy mentees dialogs line height/spacing adjustments from In Progress to Open.Oct 2 2023, 9:02 AM

Etonkovidova closed subtask T345308: [minor] Praise-worthy mentees dialogs line height/spacing adjustments as Resolved.Oct 3 2023, 9:46 PM

KStoller-WMF lowered the priority of this task from High to Medium.Oct 11 2023, 8:51 PM

KStoller-WMF moved this task from Sprint 0 (Growth Team) to Backlog on the Growth-Team board.

KStoller-WMF edited projects, added Growth-Team; removed Growth-Team (Sprint 0 (Growth Team)).

Change #944312 abandoned by Urbanecm:

[mediawiki/extensions/GrowthExperiments@master] [WIP] NOT WORKING: Mentor dashboard: Prevent the dialog from interfering with skin

Reason:

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

Change #944313 abandoned by Urbanecm:

[mediawiki/extensions/GrowthExperiments@master] [WIP] WORKING, somehow: Mentor dashboard: Prevent the dialog from interfering with skin control items

Reason:

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

Hi @Zapipedia-WMF! FYI, this issue should be resolved since August 2023, when the Design Systems team fixed the Dialog to not misbehave. I just tested it locally, and the issue indeed does not seem to appear anymore. Would you mind taking a look as well?

@Etonkovidova Moving this to QA, as it should be already fixed (as part of T343476).

Urbanecm_WMF moved this task from In Progress to Ready for QA on the GrowthExperiments-Mentorship board.Sat, Apr 6, 7:47 PM

Urbanecm_WMF moved this task from Incoming to QA on the Growth-Team (Sprint 11 (Growth Team)) board.

Maintenance_bot removed a project: Patch-For-Review.Sat, Apr 6, 8:30 PM

Checked in testwiki wmf. 25 - all seem to be fixed; checked the mobile too.

from the task description video	`testwiki wmf.25`
- The settings view of the new dashboard module is overlapping other elements of the screen.	✅ Fixed
- In the notifications frequency drop-down, is not possible to view correctly all the options, depending on the size of the window you can see all of them, none of them or just a few of them.	✅ Fixed - the drop-down menu option are always visible; if it's close to the bottom of the page, the menu's options will open up.
- Sometimes, the closing icon (x) is not working.	✅ Fixed

Note: In test wmf.25 displays the Settings dialog differently than beta cluster - the controls are displayed properly styled in betacluster :

`test wmf.25`	`beta`

Test wiki on Patch demo by Martin Urbanec (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/c7e918185c/w/~~

Test wiki on Patch demo by Martin Urbanec (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/67c1542495/w/~~

	F45034758: Screen Shot 2024-04-07 at 10.33.15 AM.png
	Sun, Apr 7, 5:40 PM

	F45034745: Screen Shot 2024-04-07 at 10.33.07 AM.png
	Sun, Apr 7, 5:40 PM

	F45033095: Screen Shot 2024-04-07 at 10.21.35 AM.png
	Sun, Apr 7, 5:40 PM

	F45032833: Screen Shot 2024-04-07 at 10.19.44 AM.png
	Sun, Apr 7, 5:40 PM

	F45032045: Screen Shot 2024-04-07 at 10.10.40 AM.png
	Sun, Apr 7, 5:40 PM

	F45030962: Screen Shot 2024-04-07 at 9.50.36 AM.png
	Sun, Apr 7, 5:40 PM

	F37641384: image.png
	Aug 29 2023, 10:32 PM

	F37158943: ZliS.gif
	Aug 1 2023, 8:11 PM

Mentor dashboard Personalized praise settings view - overlapping and misbehavior of the drop-down Closed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

Details

Related ObjectsSearch...

Event Timeline

Mentor dashboard Personalized praise settings view - overlapping and misbehavior of the drop-down
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...