Page MenuHomePhabricator

[MEX] M5 - RTL - statement editing page updates
Closed, ResolvedPublic

Assigned To
Authored By
Arian_Bozorg
May 29 2026, 3:54 PM
Referenced Files
F88624029: Screenshot 2026-06-15 at 12.55.53.png
Jun 15 2026, 10:57 AM
F87917009: 2026-06-11-074945_376x675_scrot.png
Jun 11 2026, 5:51 AM
F87815140: image.png
Jun 10 2026, 3:24 PM
F87815185: image.png
Jun 10 2026, 3:24 PM
F87601689: Screenshot 2026-06-09 at 10.46.42.png
Jun 9 2026, 8:47 AM
F85190722: image.png
May 29 2026, 3:54 PM

Description

There are a number of issues that appear on the statement editing UI on mobile in RTL langages.

  • All the input boxes should be aligned right
  • The trash icon should appear to the left of the reference input box
  • The "delete statement" text should be right aligned
  • The trash icon to delete the statement should be to the left of the text
  • The input for the Wikibase Entity ID should be RTL when in an RTL UI
  • The snak type icon for references should be aligned with the statement snak type icon above

Screenshots
is

image.png (292×622 px, 32 KB)

should be
Screenshot 2026-06-09 at 10.46.42.png (860×1,354 px, 118 KB)

For figma click here

Acceptance Criteria

  • All the input boxes are aligned right
  • The trash icon appears to the left of the reference input box
  • The "delete statement" text is right aligned
  • The trash icon to delete the statement is to the left of the text
  • The input for the Wikibase Entity ID is RTL when in an RTL UI
  • The snak type icon for references should be aligned with the statement snak type icon above

Event Timeline

Most of these issues could be resolved with T360854

I just backported the fix for T360854, so we can now check if this issue still happens.

I think this is mostly fixed (the snak type icons aren’t fully aligned, because they have different amounts of padding / boxes around them), except for:

The trash icon to delete the statement should be to the left of the text

The trash icon is on the right of the text, which mirrors LTR where it’s on the left of the text:
image.png (481×139 px, 5 KB) image.png (491×149 px, 4 KB)

This looks much better now. The snak type selector icons are still not aligned, but that is also true of ltr:

2026-06-11-074945_376x675_scrot.png (376×675 px, 30 KB)

I will investigate the snak type selector icons issue and see if there's a quick fix for that.

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

[mediawiki/extensions/Wikibase@master] Remove min-width on cdx-text-areas to fix narrow screen layout

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

Change #1300555 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Remove min-width on cdx-text-areas to fix narrow screen layout

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

This looks much better now. The snak type selector icons are still not aligned, but that is also true of ltr:

2026-06-11-074945_376x675_scrot.png (376×675 px, 30 KB)

I will investigate the snak type selector icons issue and see if there's a quick fix for that.

Hey, does this help?

Screenshot 2026-06-15 at 12.55.53.png (1,040×1,106 px, 90 KB)

@Alice.moutinho Not sure what you mean. The fix has now been merged - I hope the issue has been resolved now. It can be tested on beta.

@ArthurTaylor reach out if you want me to have a look (i tried to but failed to change the sandbox from english to an LTR language)