SpecialHomepage: Impact module overflows container on scroll in mobile
Open, MediumPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

None

Authored By

	taavi
	Sun, Nov 10, 8:46 AM

Description

Notice how the "Kyiv-Pasazhyrskyi railway station" list item has a dark gray line going through it, and below it there's a slightly different gray background on the edges.

In addition the "view all edits" link should have some bottom padding.

Event Timeline

taavi created this task.Sun, Nov 10, 8:46 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSun, Nov 10, 8:46 AM

I'm having troubles reproducing this.

This is what I see at cs.wikipedia Homepage (logged in as Martin Urbanec (WMF)):

cs.m.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&namespace=-1&uselang=en(iPhone 14 Pro Max).png (2×1 px, 352 KB)

Article titles that are too long are wrapping to several lines, as expected.

Judging by the article titles, I expect this is from the English Wikipedia. https://en.wikipedia.org/wiki/Special:Impact/Taavi already shows other articles, but they also wrap to multiple lines:

en.m.wikipedia.org_wiki_Special_Impact_Taavi(iPhone 14 Pro Max).png (2×1 px, 406 KB)

The same happens when I enable the built in dark mode and regardless of any scrolling.

Is there something special I need to do to reproduce this bug? Moving to Blocked pending clarification.

CC @Etonkovidova for awareness.

I think your test device is too tall, as this only happens after having to scroll. Also, it only happens on Special:Homepage, not on Special:Impact.

Thanks, @taavi for filing the issue! I assume that the dark mode on mobile was enabled in Preferences-Gadgets? The issue exists in both - dark and light mode on mobile.

The issue has been confirmed in betalabs and production wikis (testwiki wmf.2) (thx, @Urbanecm_WMF for bringing it to my attention) and it's been checked on a real device, as well as in a browser emulator.
(1) The extra line appears on Impact overlay on mobile:

Screen Shot 2024-11-11 at 2.27.03 PM.png (1×768 px, 186 KB)

Screen Shot 2024-11-11 at 2.53.42 PM.png (1×674 px, 179 KB)

The same screenshot made a real device - iPhone (iOS 17).

(2) "View more" is placed tightly to the edge of the viewport and definitely would benefit from adding some padding.

Thanks both! I see it too now, changing dimensions in browser emulator helped to reproduce it (375 x 667 seems to be enough).

In T379486#10308114, @taavi wrote:

Also, it only happens on Special:Homepage, not on Special:Impact.

That's...weird, but indeed seems to be the case. Wondering why, as the two modules are supposed to be rendered by the same code.

Anyway, this should now be actionable. Moving to Up Next, so we can take a look. Thanks for reporting!

KStoller-WMF set the point value for this task to 1.Tue, Nov 12, 5:31 PM

	F57695027: Screen Shot 2024-11-11 at 2.53.42 PM.png
	Mon, Nov 11, 11:14 PM

	F57695025: Screen Shot 2024-11-11 at 2.27.03 PM.png
	Mon, Nov 11, 11:14 PM

	F57692816: en.m.wikipedia.org_wiki_Special_Impact_Taavi(iPhone 14 Pro Max).png
	Sun, Nov 10, 8:51 PM

	F57692809: cs.m.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&namespace=-1&uselang=en(iPhone 14 Pro Max).png
	Sun, Nov 10, 8:51 PM

SpecialHomepage: Impact module overflows container on scroll in mobileOpen, MediumPublic1 Estimated Story PointsBUG REPORTActions

Description

Event Timeline

SpecialHomepage: Impact module overflows container on scroll in mobile
Open, MediumPublic1 Estimated Story PointsBUG REPORT
Actions