Page MenuHomePhabricator

Notifications dropdown obscured in Timeless, Monobook, new Vector at small resolutions
Open, MediumPublicBUG REPORT

Description

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

  • Use Firefox (haven't tested Chromium)
  • Make resolution mobile size give or take.
  • Click on the notifications icon.

What happens?:

  • For small screens, the notifications dropdown is totally obscured by a white area.
  • For small-medium screens, the notifications dropdown is squished by a similar white area.
  • Minerva seems to be handling this mysterious whitespace decently, relative to the other two skins

What should have happened instead?:

  • Notifications pane displays at full mobile width

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

  • 1.37.0-wmf.14 (388e638)
    • Has been a week or two of this issue.

Images are from minimum desktop resolution.

TimelessVectorMinerva
image.png (726×447 px, 19 KB)
image.png (743×470 px, 20 KB)
image.png (741×450 px, 29 KB)

Event Timeline

Restricted Application added a subscriber: Masumrezarock100. · View Herald Transcript

I'm not sure what would have made this regress, but the reason this is not such a problem in Minerva is these hacky styles:
https://github.com/wikimedia/mediawiki-extensions-Echo/tree/master/modules

The fix lies in Echo, perhaps it's time to address the issue at the source at the component level and remove the need for these Minerva hacks?

Fixing this would ideally be done by the Growth team, as the web team has only a small amount of experience of working with Echo.

cc @ovasileva @alexhollender

@ovasileva @Jdlrobson -- thanks for pointing this out. I have a couple questions:

  • It sounds like this is in production now, right?
  • @Jdlrobson -- I heard you might have a patch for this. If you do, could you please add it to the task?
  • @Etonkovidova -- could you please check this and reproduce?

I think we can look at a patch or otherwise help during next week. Does that sound okay to everyone?

CC @DMburugu @kostajh @Tgr @mewoph @RHo

It sounds like this is in production now, right?

Yup.

@Jdlrobson -- I heard you might have a patch for this. If you do, could you please add it to the task?

Nope. I don't have a patch, just a rough idea of how it might be fixed based on work we've previously done in Minerva. I can help with one next week if you need the additional support.

Thanks, @Jdlrobson. I'm having trouble reproducing this on my own, so it would be helpful if you could give me a sense of how pervasive and impactful this issue is. What do you think?

It impacts users who resize their window on a desktop browser (in Minerva (rare), Timeless or Vector) or use the desktop site on their mobile phone (while using Minerva desktop (very rare) or Timeless (more commonly).

replication steps are:

It impacts users who resize their window on a desktop browser (in Minerva (rare), Timeless or Vector) or use the desktop site on their mobile phone (while using Minerva desktop (very rare) or Timeless (more commonly).

replication steps are:

There are several issues for the Timeless skin.
(1) Timeless, Vector (default), and legacy Vector small screens on Desktop (as described in the comment above). The issue is present when the screen size is <530.

vector_small_screen8.gif (1×765 px, 2 MB)

(2) Timeless skin - using Desktop on mobile - the notifications are not displayed. ("Enable responsive mode" is enabled).
Tested on mobile emulators and real devices (iPhone 6s, Samsung Galaxy S8 - screen width 375px). The echo notifications are not displayed (see the screenshot below and the screen recording from iPhone 6s).
Screen Shot 2021-07-26 at 1.02.19 PM.png (1×1 px, 139 KB)
}

This animated gif shows that Timeless Desktop on mobile loads the notifications and immediately replaces it with the blanc. It was recorded on Galaxy S5 browser emulator but the behavior was checked and confirmed on a real device - Galaxy 8:

chrome_small_screen3.gif (805×447 px, 275 KB)
`

@Etonkovidova Thanks for the additional tests. I appreciate your effort and diligence in digging into this. Given that the Timeless skin is more likely to be used, we can schedule it for a bug fix for it.

Jdlrobson renamed this task from Notifications dropdown obscured in Timeless, new Vector at small resolutions to Notifications dropdown obscured in Timeless, Monobook, new Vector at small resolutions.Aug 14 2021, 2:49 PM
Jdlrobson added subscribers: Writ_Keeper, Aklapper.
kostajh triaged this task as Medium priority.Aug 18 2021, 7:54 AM