Page MenuHomePhabricator
Create Task
Maniphest T397747

Help panel: floating button covers help text
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Description

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

What happens?:

  • the floating button covers the help text

What should have happened instead?:

  • the help text should account for the floating button placement and display the whole text: "Ready? Open the section you want to edit and tap the pencil icon."

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

IMG_3750.PNG (2×1 px, 375 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Fix floating button overlap on mobile footer textmediawiki/extensions/GrowthExperimentsmaster+8 -0
fix(HelpPanel): temporary fix for z-index overlap issuesmediawiki/extensions/GrowthExperimentsmaster+26 -9
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedSgsT399864 Help panel stacking issues
 ResolvedBUG REPORTCyndymediawiksimT397747 Help panel: floating button covers help text

Event Timeline

AAlhazwani-WMF created this task.Jun 24 2025, 4:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 24 2025, 4:50 PM
Etonkovidova moved this task from Inbox to Estimated tasks backlog on the Growth-Team board.Jun 26 2025, 2:25 AM
Michael subscribed.Jul 2 2025, 4:24 PM

@AAlhazwani-WMF: Let's talk about this a bit more. Is it really intended that both the overlay and the dock-button are visible at the same time on top of each other? If so, we need to better understand which of the two UI elements should be higher on the vertical axis.

AAlhazwani-WMF added a comment.Jul 3 2025, 10:39 AM
In T397747#10968663, @Michael wrote:

@AAlhazwani-WMF: Let's talk about this a bit more. Is it really intended that both the overlay and the dock-button are visible at the same time on top of each other? If so, we need to better understand which of the two UI elements should be higher on the vertical axis.

@Michael from my own understanding both are supposed to be visible at the same time:

  • the help text so that newcomers can learn that if they want to edit a specific section, they need to tap the pencil next to the section title, and not the top-level pencil in the nav bar at the top of the article
  • the floating button, so that they can close the help panel in the same way they've opened it, making the action truly reservable following the same interaction pattern

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

padding-right: calc(48px + 16px); // 48px is the size of the floating button, 16px is twice the margin (8+8)

image.png (332×840 px, 54 KB)

KStoller-WMF triaged this task as Medium priority.Jul 7 2025, 4:14 PM
KStoller-WMF set the point value for this task to 2.
KStoller-WMF raised the priority of this task from Medium to High.Jul 8 2025, 4:56 PM
gerritbot added a comment.Jul 14 2025, 4:46 PM

Change #1169201 had a related patch set uploaded (by Cyndywikime; author: Cyndywikime):

[mediawiki/extensions/GrowthExperiments@master] Fix floating button overlap on mobile footer text

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

gerritbot added a project: Patch-For-Review.Jul 14 2025, 4:46 PM
Cyndymediawiksim claimed this task.Jul 14 2025, 4:47 PM
Cyndymediawiksim edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
Cyndymediawiksim moved this task from Incoming to Code Review on the Growth-Team (Current Sprint) board.
Cyndymediawiksim moved this task from Code Review to Blocked / Needs Work on the Growth-Team (Current Sprint) board.Jul 15 2025, 4:55 PM
Sgs mentioned this in T399864: Help panel stacking issues.Jul 17 2025, 3:22 PM
Sgs added a parent task: T399864: Help panel stacking issues.
gerritbot added a comment.Jul 25 2025, 12:42 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 comment.Jul 25 2025, 7:06 PM

Change #1172624 merged by jenkins-bot:

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

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

Cyndymediawiksim moved this task from Blocked / Needs Work to QA on the Growth-Team (Current Sprint) board.Jul 28 2025, 6:59 AM
Etonkovidova closed this task as Resolved.Aug 12 2025, 9:06 PM
gerritbot added a comment.Aug 18 2025, 9:20 AM

Change #1169201 abandoned by Cyndywikime:

[mediawiki/extensions/GrowthExperiments@master] Fix floating button overlap on mobile footer text

Reason:

Overall docking fixed

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

Maintenance_bot removed a project: Patch-For-Review.Aug 18 2025, 9:31 AM
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