Page MenuHomePhabricator

Long article names break small card title
Closed, ResolvedPublicBUG REPORT

Description

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

  • Navigate to Special:Homepage
  • Click on any suggestion from the Suggested edits feed
  • Complete the suggested edit
  • Wait for the post-edit dialog to appear

What happens?:
Long article names are hidden when they overflow outside of the small card.

What should have happened instead?:
Long article names should use ellipsis or break into multiple lines. The requirement was described in this comment T258021#6469666 but seems we might have never met it or a regression happened. See screenshot:

Screenshot 2022-05-05 at 00.10.08.png (2×3 px, 1 MB)

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Reproduced in beta and test. wmf.9 and before

Event Timeline

@RHo could you help confirm the expectation so we can take action on this bug? Thank you.

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

[mediawiki/extensions/GrowthExperiments@master] Post edit: avoid title overflow for long article names

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

@RHo could you help confirm the expectation so we can take action on this bug? Thank you.

Yes, confirmed that this was the expectation, thanks for catching that!

Sgs changed the task status from Open to In Progress.May 5 2022, 4:03 PM
Sgs claimed this task.

@RHo could you help confirm the expectation so we can take action on this bug? Thank you.

Yes, confirmed that this was the expectation, thanks for catching that!

I think the requirements might be scattered across more phab tasks because the current status quo (with bug) does not match the expectations mentioned in T258021#6469666 for the following reasons:

  1. title should be 2 lines, it is 1 now
  2. description should be 1 line, it is 2 now
  3. extra overflow is handled with ellipsis instead of fade to

This is how it would look with the fix:

Targetcurrentwith patch
Desktop
Screenshot 2022-05-05 at 18.47.20.png (574×992 px, 93 KB)
Screenshot 2022-05-05 at 18.52.21.png (604×1 px, 80 KB)
Mobile
Screenshot 2022-05-05 at 19.31.12.png (586×794 px, 105 KB)
Screenshot 2022-05-05 at 19.27.36.png (590×782 px, 130 KB)

It addresses issues (1) and (2) but leaves (3) to still use ... since I couldn't find an up-to-date figma/zepelin spec.

@mewoph mentioned that we might have different requirements for mobile as well. @RHo could you clarify the expectations for it as well? Thank you.

This is the existing logic we have for the small task card (used in both the post-edit dialog and the mobile summary view of the suggested edits) and there are a few discrepancies which I'm not sure is intentional (I can't find this component in the Growth components Figma)

TitleDescriptionTitle colorImage
Desktop (post-edit dialog)1 line2 linesBlue
Screen Shot 2022-05-05 at 10.37.06 AM.png (566×982 px, 68 KB)
Mobile (post-edit dialog)2 lines1 lineBlue
Screen Shot 2022-05-05 at 10.40.10 AM.png (568×750 px, 64 KB)
Mobile (suggested edits)2 lines1 lineBlack
Screen Shot 2022-05-05 at 10.33.29 AM.png (526×724 px, 57 KB)

This is the existing logic we have for the small task card (used in both the post-edit dialog and the mobile summary view of the suggested edits) and there are a few discrepancies which I'm not sure is intentional (I can't find this component in the Growth components Figma)

TitleDescriptionTitle colorImage
Desktop (post-edit dialog)1 line2 linesBlue
Screen Shot 2022-05-05 at 10.37.06 AM.png (566×982 px, 68 KB)
Mobile (post-edit dialog)2 lines1 lineBlue
Screen Shot 2022-05-05 at 10.40.10 AM.png (568×750 px, 64 KB)
Mobile (suggested edits)2 lines1 lineBlack
Screen Shot 2022-05-05 at 10.33.29 AM.png (526×724 px, 57 KB)

Hi there - apologies for the discrepancies but the title in the post-edit dialog and summary SE card should be Base10. I think this discrepancy may have been due to originally the post-edit dialog summary view of edits sharing the same code as the inspector card for add links article suggestion (for which we do want blue link title).

As to the logic of the title text, the title and wikidata description should be 1-line max for when there is a wikidata description on the article, but if there is no wikidata description, the title can go over 2 lines:

I've since added another example on the Growth components Figma for the module preview here – the file is a work-in-progress so I've not yet added the related post-edit dialog, but hopefully will be completed in coming weeks!

Hi there - apologies for the discrepancies but the title in the post-edit dialog and summary SE card should be Base10. I think this discrepancy may have been due to originally the post-edit dialog summary view of edits sharing the same code as the inspector card for add links article suggestion (for which we do want blue link title).

I added this update to the patch. Note that in the prior implementation there was an active state defined for the title which was darkening a bit the blue color. Maybe we want to keep some visual feedback in the title on this state.

As to the logic of the title text, the title and wikidata description should be 1-line max for when there is a wikidata description on the article, but if there is no wikidata description, the title can go over 2 lines:

Targetcurrentwith patch (has description)with patch (no description)
Desktop
Screenshot 2022-05-05 at 18.47.20.png (574×992 px, 93 KB)
Screenshot 2022-05-09 at 11.49.23.png (564×984 px, 150 KB)
Screenshot 2022-05-09 at 11.48.30.png (566×990 px, 159 KB)
Mobile
Screenshot 2022-05-05 at 19.31.12.png (586×794 px, 105 KB)
Screenshot 2022-05-09 at 11.47.32.png (552×754 px, 60 KB)
Screenshot 2022-05-09 at 11.54.20.png (552×762 px, 113 KB)

Done. Note that the truncation logic is now the same across platforms as opposite from before.

I've since added another example on the Growth components Figma for the module preview here – the file is a work-in-progress so I've not yet added the related post-edit dialog, but hopefully will be completed in coming weeks!

Great. Thank you!

@RHo we've +2'ed the patch, but there's still a question at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/789311/6/modules/ext.growthExperiments.Homepage.styles/SmallTaskCard.less#74:

	&-title {
		font-weight: bold;
		margin-bottom: 4px;
		color: @wmui-color-base10;
		&:active {
			// FIXME per https://phabricator.wikimedia.org/T307637#7909619 this color
			// is not defined yet
			color: @wmui-color-base10;
		}
	}

when you know what we should change the active style to, please comment here. thanks!

Change 789311 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit: avoid title overflow for long article name

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in betalabs - the UI matches the screenshots in @Sgs the comment above.

  • Mobile

Adding the screenshots for Mobile SE preview:

no description
Screenshot_20220511-133257_Chrome.jpg (2×1 px, 308 KB)
with description
Screenshot_20220511-130600_Chrome.jpg (2×1 px, 340 KB)

@RHo - there is also the case when a user selects filters that return zero results - looks ok?

Screenshot_20220511-131239_Chrome.jpg (2×1 px, 283 KB)

RHo closed this task as Resolved.EditedMay 12 2022, 12:58 PM

Checked in betalabs - the UI matches the screenshots in @Sgs the comment above.

  • Mobile

Adding the screenshots for Mobile SE preview:

no description
Screenshot_20220511-133257_Chrome.jpg (2×1 px, 308 KB)
with description
Screenshot_20220511-130600_Chrome.jpg (2×1 px, 340 KB)

@RHo - there is also the case when a user selects filters that return zero results - looks ok?

Screenshot_20220511-131239_Chrome.jpg (2×1 px, 283 KB)

Thanks @Etonkovidova the non-breaking title issue above looks good now so I will resolve this task. However, as you may suspect the zero results has some visual regression from how it should look (see Growth component here) where the footer should be a white background instead of pale grey. I've created a separate task for this: T308241.

Expected
image.png (382×688 px, 33 KB)
Actual
Screenshot_20220511-131239_Chrome.jpg (2×1 px, 283 KB)