Page MenuHomePhabricator

[MEX] 3.2.2 Publish / Cancel buttons disappear off the bottom of the screen on mobile
Closed, ResolvedPublic

Description

When editing a statement on beta (e.g. on https://www.wikidata.beta.wmcloud.org/wiki/Q81561 ), the publish / cancel buttons disappear of the bottom of the screen on (some?) mobile devices:

Screenshot_20251122-102343.png (2×1 px, 119 KB)

rn_image_picker_lib_temp_882e541b-8969-4c5d-82d4-14c8c388aa6b.png (2×1 px, 94 KB)

Update the implementation to avoid this.

Acceptance Criteria

  • Publish / Cancel buttons (and any elements positioned at the 'bottom' of the screen, e.g. status messages) are visible on mobile
  • Cypress tests are updated to catch regressions of this issue.

Note: It may not be possible to update the cypress tests to catch the issue. Use discretion and drop the AC if needed

Event Timeline

Change #1211646 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] Fix cutoff publish / cancel buttons on mobile

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

To test this change locally, I needed to use mitmproxy to make my local wiki available at an address that my phone could see:

mitmproxy --listen-port 8000 --mode reverse:http://wikidatawikidev.mediawiki.mwdd.localhost:8080 -s mitmscript.py

mitmscript.py:

from mitmproxy import http

TARGET = "https://wikidatawikidev.mediawiki.mwdd.localhost:8080"
PUBLIC = "https://ac5e53948ad2.ngrok-free.app" 

def response(flow: http.HTTPFlow) -> None:
    loc = flow.response.headers.get("Location")
    if loc and loc.startswith(TARGET):
        flow.response.headers["Location"] = PUBLIC + loc[len(TARGET):]

    links = flow.response.headers.get_all("Link")
    if links:
        new_links = []
        for v in links:
            new_links.append(v.replace(TARGET, PUBLIC))
        flow.response.headers.set_all("Link", new_links)

    ctype = flow.response.headers.get("Content-Type", "")
    if "text/html" in ctype or "text/css" in ctype or "text/javascript" in ctype:
        text = flow.response.get_text()
        text = text.replace(TARGET, PUBLIC)
        flow.response.set_text(text)

I used ngrok to make my local port 8000 available to devices on the internet.

With regards the second acceptance criteria, I investigated whether Cypress could reproduce the difference between dvh and vh, and was unable to find a way to do that. It is possible to write a cypress test that dynamically resizes the window, but since this appears to update the vh property, the original code worked just as well as the new code. For that reason, no regression test is included in the patch.

Change #1211646 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix cutoff publish / cancel buttons on mobile

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