Page MenuHomePhabricator

[BUG] Newcomer tasks: Suggested edit footer text displaying poorly when text overflows single line
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
RHo
Jun 4 2020, 10:46 PM
Referenced Files
F31860507: image.png
Jun 10 2020, 7:49 PM
F31859504: Screen Shot 2020-06-09 at 3.09.48 PM.png
Jun 9 2020, 10:13 PM
F31859495: IMG_9048.PNG
Jun 9 2020, 10:13 PM
F31859501: Screen Shot 2020-06-08 at 8.17.40 AM.png
Jun 9 2020, 10:13 PM
F31859510: Screen Shot 2020-06-09 at 3.03.38 PM.png
Jun 9 2020, 10:13 PM
F31853974: image.png
Jun 4 2020, 10:46 PM
F31853968: image.png
Jun 4 2020, 10:46 PM

Description

This can be seen on cswiki when the panel is at its narrowest. The footer copy overlaps when it goes over a single line.

image.png (96×574 px, 18 KB)

Proposed fix

image.png (156×564 px, 16 KB)

This involves:

  1. Allowing footer height to adjust to fit content
  2. Update the line-height from .mw-ge-help-panel-processdialog .suggested-edits-panel-footer-text {line-height:0.65} to a line-height:1.3;

Notes:
@Catrope has advised there may be knock on effects on the panel scrolling behavior if the footer is height is changed from a fixed number to "fit-content".
Maybe doable by using flexbox and setting a min-height, but in the interim we may wish to allow ellipsis for when footer text is over one line.

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptJun 4 2020, 10:46 PM

Change 603553 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: use flexbox instead of fixed height for footer

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

Unrelated to this task, but I noticed the footer is not hidden when switching to edit mode on mobile.

Change 603553 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: use flexbox instead of fixed height for footer

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

Unrelated to this task, but I noticed the footer is not hidden when switching to edit mode on mobile.

@Etonkovidova -- could you please check and file this?

Unrelated to this task, but I noticed the footer is not hidden when switching to edit mode on mobile.

@Etonkovidova -- could you please check and file this?

That's because we set edit mode only when the help panel is open, but on mobile it's closed when the user taps Edit. I've added this into the overall patch for guidance behavior rules https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/602050

For Design review - no issues were found.

Checked in betalabs - on both mobile and desktop (with a narrow panel, just in case) - the fix is in place:
(on the screenshots some UI bugs are present - the difficulty level label is displayed on two lines, double vertical scrolling and a narrow panel have been reported in other phab tasks).

  • mobile - iPHone 6s **

IMG_9048.PNG (1×640 px, 138 KB)

  • with a narrow panel **
beforeafter the fix
Screen Shot 2020-06-08 at 8.17.40 AM.png (486×315 px, 49 KB)
Screen Shot 2020-06-09 at 3.09.48 PM.png (518×393 px, 50 KB)
  • the footer nicely accommodates really long texts **

Screen Shot 2020-06-09 at 3.03.38 PM.png (741×428 px, 83 KB)

Looks good to me in production. Thank you!