Page MenuHomePhabricator

Edit cards overlap dialog elements on mobile in some cases
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Try editing any page e.g a User page
  • Click on the cite icon
  • Pick automatic on the Add a citation page
  • Type in "test" and click the Generate button
  • Insert the website it brings up
  • Try editing the newly added citation
  • Click on the "Change reference type" button at the bottom of the screen
  • Switch to manual this time
  • Click on Basic on the list of options
  • Click the "TEST TEST ..." link
  • As soon as the template modal pops up at the bottom of the screen
  • Scroll all the way down to see the lower part of the screen and the template overlap.

What happens?:
The Template popup overlaps the end(Options section) of the page with the Options section . Interacting with the Template popup is impossible.

IMG_1011.PNG (2×1 px, 462 KB)

What should have happened instead?:
The Template Options section should not be visible under the Template popup as shown below.

Screenshot 2021-10-12 at 18.53.40.png (1×712 px, 127 KB)

Cc: @matmarex @Ryasmeen

Event Timeline

matmarex edited projects, added Editing-team (Kanban Board); removed Editing-team.

This is a more general issue – it happens whenever there is anything with an edit card / context menu (e.g. a template or a link) in anything that has a dialog (e.g. basic reference or image caption). I realized while working on T307849 that they are basically the same problem, and the patch there also improves the behavior here.

BeforeAfterNotes
Template in basic reference
A9133A86-B1BD-4806-A6C8-7322D460791C.png (1×640 px, 55 KB)
B74C8BBE-46B2-469D-ADE5-73BACC8ED6C8.png (1×640 px, 54 KB)
This also affects templates that are short, although less obviously so – some of the buttons in the template edit card are hidden by the dialog's footer, but the visuals don't look obviously broken
Link in image caption
C1F6C00F-59B6-47DC-8421-438C51ABCEB9.png (1×640 px, 75 KB)
E3C90197-B50C-4582-A59B-68ED460B9BE1.png (1×640 px, 70 KB)
Link edit card is terribly smooshed together with elements from the dialog. You can also see a problem with the toolbar that looks just like T308201.

Change 793136 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[VisualEditor/VisualEditor@master] ve.ui.Surface: Attach mobile context to global overlay

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

matmarex renamed this task from Template popup and options section of edit reference page overlaps when source title is a long string(mobile) to Edit cards overlap dialog elements on mobile in some cases.May 19 2022, 11:51 PM

Change 793136 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] ve.ui.Surface: Attach mobile context to global overlay

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

Change 794559 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (595380444)

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

Change 794559 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (595380444)

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