Are there any warning/error messages in the developer console? UI regressions used to be covered by the storybook https://doc.wikimedia.org/MobileFrontend/master/js/ui/ but that has been broken for some time.

In T387119#10575860, @Jdlrobson-WMF wrote:

Are there any warning/error messages in the developer console?

No errors. I see two warnings:

• Extending Overlay class constructor is deprecated. Please use Overlay.make
• Extending View class constructor is deprecated. Please use View.make

Change #1122690 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] POC: Update block drawer

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

Managed to replicate this with some dummy date. I'm not sure when and how this broke, but I'm seeing several issues with the current implementation:

1. Various inline styles are being added top: -100px; that may break with the default drawer styling. Suggest removing them.
2. block-message-buttons is position fixed which is causing display issues. I'm not sure why this needs to be position fixed since it is already a child of a position fixed element.
3. The warning messages should be addressed to avoid breaking this in future (and might be contributing to other issues).

I wrote https://gerrit.wikimedia.org/r/1122690 which seems to restore much of the display, but I'm not setup to accurately test and not sure exactly how it should look. Feel free to fork it or amend it as necessary.

Adding to our current sprint, as it's important to fix the UX for block notices on mobile.

Happy to help with code review and any questions! On the longer term I'm trying to find out how to get mobile using OOUI and Codex so that we can avoid these kind of issues in future. Sorry for this horrible interim state!

Change #1122690 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] POC: Update block drawer

Reason:

Let me know if you need any help on fixing this for real! I'm not sure how to get this working locally but happy to pair with someone if you want to put some time in my calendar!

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

There's a screenshot showing how this should look like here: T189717: Better handle block reasons on mobile (specifically templates and HTML comments)

I was able to reproduce the issue. It looks like the fix in the POC change https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1122690 with some modifications fixes some of the issues (in the image below, the blue background at the bottom is used to better see where the footer starts):

Note here I'm putting the popup in the top of the screen (instead of the bottom), and make the reason scrollable. That approach seems simpler because that way we don't need to compute the top for the popup based on the screen size.

@KColeman-WMF would that be ok (i.e. have the popup at the top)? Making the reason scrollable would also allow to set min/max heights for the popup based on the screen size easier.

Change #1129332 had a related patch set uploaded (by Harroyo-wmf; author: Harroyo-wmf):

[mediawiki/extensions/MobileFrontend@master] dialog: Pin block dialog to the top of the screen, make reason scrollable

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

In T387119#10651947, @hector.arroyo wrote:

I was able to reproduce the issue. It looks like the fix in the POC change https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1122690 with some modifications fixes some of the issues (in the image below, the blue background at the bottom is used to better see where the footer starts):

Note here I'm putting the popup in the top of the screen (instead of the bottom), and make the reason scrollable. That approach seems simpler because that way we don't need to compute the top for the popup based on the screen size.

@KColeman-WMF would that be ok (i.e. have the popup at the top)? Making the reason scrollable would also allow to set min/max heights for the popup based on the screen size easier.

I'm not sure about that. The idea with the Drawer component was to appear at the bottom, and there are other tools (see T280330: Support Floating tools and dialogs at the bottom of the viewport) which also do that as well. So if we pin to the top, we'll be doing something inconsistent with the other tools.

In T387119#10654381, @kostajh wrote:

I'm not sure about that. The idea with the Drawer component was to appear at the bottom, and there are other tools (see T280330: Support Floating tools and dialogs at the bottom of the viewport) which also do that as well. So if we pin to the top, we'll be doing something inconsistent with the other tools.

I'm working on https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1129332 which builds on top of the previous patch and seems to work right while still keeping the dialog at the bottom. This solution modifies slightly the former one to make the div with the reason text scrollable.

As part of this task, we did a refactor that broke the QUnit tests, and fixing them turned out to be a bit tricky.

Right now the fix and the tests are working as expected, so the patch is ready for review again: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1129332

I've removed a fix to prevent the popup revealing the contents behind it and filed T390834: Block messages reveal the contents behind the popup on small screen sizes instead.

Change #1129332 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] blockMessage: Pin the dialog to the bottom, make the reason scrollable

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

A change https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1129332 to fix this has been just merged.

The problem related to the popup revealing part of the contents behind it when the screen is too small has been left out of this patch, as it is to be addressed in T390834: Block messages reveal the contents behind the popup on small screen sizes.

The testing for this ticket T387119 has been completed, and the new code has been implemented and is functioning as expected.
The issue with flipping the phone to landscape view has been filed under ticket T390834 Block messages reveal the contents behind the popup on small screen sizes.