Page MenuHomePhabricator

Top align buttons (expand/collapse and ellipsis) within mobile headings
Closed, ResolvedPublic

Assigned To
Authored By
Esanders
Aug 21 2023, 4:50 PM
Referenced Files
F41479442: image.png
Nov 9 2023, 9:21 PM
F37603275: image.png
Aug 21 2023, 4:50 PM
F37603267: image.png
Aug 21 2023, 4:50 PM
F37603307: image.png
Aug 21 2023, 4:50 PM
F37603248: image.png
Aug 21 2023, 4:50 PM
F37603246: image.png
Aug 21 2023, 4:50 PM

Description

When scanning titles your eye starts in the top left, which is the natural place for the expand action to go. Similarly the ellipsis should be top aligned on the right hand side.

BeforeAfter
image.png (870×412 px, 85 KB)
image.png (870×412 px, 85 KB)

This is also how we align the subscribe button on desktop:

image.png (234×688 px, 54 KB)

And how buttons are aligned on mobile apps:

Talk pageArticle
image.png (1×457 px, 260 KB)
image.png (1×457 px, 510 KB)

(iOS is the same)

Event Timeline

Great point, thank you @Esanders – I agree with the new alignment you're proposing.

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

[mediawiki/extensions/DiscussionTools@master] Use top alignment for buttons on mobile talk pages

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

Change 952257 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Use top alignment for buttons on mobile talk pages

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

There's a new bug that I think might be related to this change? From a user-report at Enwiki:

Are my [expand / collapse][chevrons / carets] supposed to be misaligned with the section headings now on Minerva? (Android + Firefox, duplicated in Chrome). Just wondering if this is intentional.

Screenshot:

image.png (400×1 px, 104 KB)

Nuance: It seems to only affect some pages, not all. E.g.

ppelberg claimed this task.