Page MenuHomePhabricator

[MEX] 🚧 M5 - mandatory fields to values: layout correction
Closed, ResolvedPublic

Description

Screenshot 2026-06-10 at 16.54.29.png (620×614 px, 72 KB)

The layout for the additional field to a value, in this example "Language" is strange.

AC

  • the title of the extra field (unit, language) is left aligned on LTR languages and right aligned on RTL languages
  • the spacing between the elements matches the design: between the value input field and the title of the extra field (in this example, "language" should be 12px (spacing 25)

Screenshot 2026-06-10 at 17.03.11.png (654×644 px, 29 KB)

Figma file

Event Timeline

ArthurTaylor renamed this task from [MEX] M5 - mandatory fields to values: layout correction to [MEX] 🚧 M5 - mandatory fields to values: layout correction.Jun 12 2026, 9:38 AM
ArthurTaylor moved this task from The Backlog to The Board on the Wikidata-Omega board.
ArthurTaylor edited projects, added: Wikidata-Omega (The Board); removed: Wikidata-Omega.

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

[mediawiki/extensions/Wikibase@master] Fix layout issues with mandatory fields

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

Change #1301334 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix layout issues with secondary input fields

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

The text seems to be aligned correctly but the padding is still looking off:

image.png (447×436 px, 10 KB)

Tagging @Alice.moutinho to advise on this

Thanks @Arian_Bozorg !

The title - Language (mandatory) - needs to be closer to the language field.
The space between the value and mandatory field should be spacing -75 (12px)
The space between the value and the property fields should be spacing-125 (20px)

Screenshot 2026-06-22 at 09.44.33.png (1,170×536 px, 47 KB)

hope this helps!

Also, the snak type icon should be right aligned as the other elements, but the padding starts there instead:

Screenshot 2026-06-22 at 09.55.32.png (1,158×216 px, 48 KB)

Change #1305468 had a related patch set uploaded (by Audrey Penven; author: Audrey Penven):

[mediawiki/extensions/Wikibase@master] Fix spacing for secondary inputs

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

Change #1305468 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix spacing for secondary inputs

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

i cannot trigger this right now, all the properties i know where the mandatory selection would come are giving no results in mex (i checked the desktop sandbox and they still work there. i will try again tomorrow

Screenshot 2026-06-25 at 17.17.41.png (844×732 px, 42 KB)

These can take a few days to arrive on the train, but you can check it on beta immediately.

And you can see where the train is here: https://versions.toolforge.org/

hi!

Not sure if i should comment this here or make a new ticket:

Screenshot 2026-06-26 at 16.00.37.png (1,192×630 px, 102 KB)

If this AC is completed, "between the value input field and the title of the extra field should be 12px (spacing 25)" which i am having trouble verifying, this ticket is completed.

But i just saw that the distance between the language field to the next UI element -in this case the rank button - which was supposed to be the same, spacing-35, is way shorter.

So either we have too much space between value field and "language mandatory" (then this ticket is not done) or too less space to preferred rank (then we either change it here or i make a new ticket!)!

ps. can someone recommend me a good visual inspector
ps 2 i hope you understand what i mean, the heat is making my brain melt

@mahmoud.abdelsattar.wmde, can you respond my previous comment? or tell me who i should tag :D

Hi @Alice.moutinho .. from the Chrome Inspector, they seem to have 12px gap for both the mentioned elements.
The gap space is the purple area .. the screens are taken from the statement edit modal.
Are there any other places where these values were missed?

image.png (2,206×595 px, 435 KB)
image.png (2,206×636 px, 474 KB)

Hi!

checked with Audrey - we were digging into the constrain violations and stumbled on this - and the issue is the line height on the "language mandatory". But that seems tricky to fix so let's leave it like that :)