Description

There are several stacking or collision issues causes by the Help panel displaying over other interfaces. This task is a placeholder to collect them all, discuss a common solution if possible and ease the fixing and QA process.

Overlap issues


T397897: [mobile] Help panel button is displayed on Notifications overlay , regression on T291603	T397747: Help panel: floating button covers help text

Unresponsive button issues

Other non filed possible issues

Screenshot 2025-07-17 at 17.26.52.png (794×1,312 px, 142 KB)

Edit summary dialog

z-index surfaces inventory

Interface	`z-index`	Source
VE paper surface	?	Haven't found it. Help panel floating button needs at least `z-index: 2;` to show above
Help panel button	unset, lays on the docked menu	—
Help panel overlay (OOUI dialog)	4	WindowManager, ProcessDialog
Minerva dock menu	9999	BottomDock.less

Acceptance criteria
TBD

Open questions

How should the help panel overlay surface be stacked, below the docked menu? Stretching vertical space only until the docked menu?
How should overlays behave in terms of stacking, should they appear over the docked menu buttons or otoh should they reserve space? As an example, the bug report from T291603 states the

	Subject	Repo	Branch	Lines +/-
	fix(HelpPanel): temporary fix for z-index overlap issues	mediawiki/extensions/GrowthExperiments	master	+26 -9

Status	Subtype	Assigned	Task
Resolved		Sgs	T399864 Help panel stacking issues
Resolved	BUG REPORT	Etonkovidova	T397897 [mobile] Help panel button is displayed on Notifications overlay
Resolved	BUG REPORT	Etonkovidova	T397745 [mobile] Help panel: can't be collapsed with floating button on mobile web
Resolved	BUG REPORT	Cyndymediawiksim	T397747 Help panel: floating button covers help text
Resolved	BUG REPORT	Etonkovidova	T397381 [mobile] Help button is clickable when not visible
Resolved	BUG REPORT	Etonkovidova	T397289 Help panel: `?` button is visible and doesn't respond when publish dialog is open
Resolved	BUG REPORT	Etonkovidova	T395108 Help panel is shown but clicking it is disabled on mobile VisualEditor when an editing dialog is open

Event Timeline

Sgs created this task.Jul 17 2025, 3:22 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 17 2025, 3:22 PM

Sgs added a subtask: T397897: [mobile] Help panel button is displayed on Notifications overlay .Jul 17 2025, 3:23 PM

Sgs added a subtask: T397745: [mobile] Help panel: can't be collapsed with floating button on mobile web.

Sgs added a subtask: T397747: Help panel: floating button covers help text.

Sgs added a subtask: T397381: [mobile] Help button is clickable when not visible .

Sgs added a subtask: T397289: Help panel: `?` button is visible and doesn't respond when publish dialog is open.

Sgs updated the task description. (Show Details)Jul 17 2025, 3:31 PM

Sgs updated the task description. (Show Details)Jul 17 2025, 3:46 PM

In T397747#10971937, @AAlhazwani-WMF wrote:

my suggestion would be to account for the space by setting a padding-right equivalent to the floating button + margins, something like this:
...

That could work but the challenge is to find a solution that scales for the amount of use cases there may be around this stacking problem. I have found for instance T291603: Help panel: guidance floating button appears over the Notifications mobile where the requirement is the opposite in terms of stacking, the button should not show or stay behind the notifications overlay (which by the way seems now broken again). Also there's the case where several buttons could be docked.

We could try to set a rule by context (is the help panel button relevant in that view?) or by interface priority (eg dock menu buttons always appear on top of everything, which is what currently Minerva is already enforcing, source ). I believe we should try to keep the help panel as reusable as possible in the sense it could be rendered almost anywhere. Whether it's a good idea to show it over overlays in general I'm not sure but if that's the case it seems every overlay in MW should check whether there's a dock menu present when displaying and reserve space for it.

Note: Back when the help panel and suggested edits dialogs were created there wasn't Codex or an standarized z-index stacking scale available as we do now which will help to solve the issue.

Volker_E added a project: CSS.Jul 17 2025, 4:50 PM

Volker_E subscribed.

KStoller-WMF subscribed.Jul 17 2025, 4:51 PM

Sgs updated the task description. (Show Details)Jul 18 2025, 9:11 AM

Sgs updated the task description. (Show Details)Jul 22 2025, 3:06 PM

Sgs attached a referenced file: F62447246: IMG_3750.PNG. (Show Details)Jul 22 2025, 3:23 PM

Sgs attached a referenced file: F62486783: Screenshot 2025-06-25 at 9.33.38 PM.png. (Show Details)

Volker_E added a project: Reader Experience Team.Jul 24 2025, 4:15 PM

Change #1172624 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] fix(HelpPanel): temporary fix for z-index overlap issues

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

gerritbot added a project: Patch-For-Review.Jul 25 2025, 12:42 PM