Page MenuHomePhabricator

Wikidata reference text field 0px width on mobile browser in desktop mode with Vector 2022 skin
Open, Stalled, Needs TriagePublicBUG REPORT

Description

Steps to reproduce

  1. Login to Wikidata.org
  2. Enable Vector 2022
  3. Open developers tools (Chrome: Ctrl + Shift +I)
  4. Toggle device toolbar (Chrome: Ctrl + Shift + M), change "dimensions" to a mobile device.
  5. try adding a reference to an item while still in dekstop mode (mobile mode doesn't support editing)

Expected results

  • The textfield for the value of the property of a reference shouldn't be 0px wide

Actual results

wd error 2.png (247×304 px, 9 KB)

wd error 1.png (353×542 px, 14 KB)

Environments observed

  • Browser version: Chrome 103
  • OS version: Android 11
  • Device model: Xiaomi 9SE
  • Device language: English

Possible fix

I've fixed it for myself with:

.wikibase-referenceview .valueview-value textarea{
	width:100px;
}

probably not ideal

Event Timeline

1Veertje renamed this task from [Bug] Wikidata reference Text field 0px width on mobile browser in desktop mode with Vector 2022 skin to [Bug] Wikidata reference text field 0px width on mobile browser in desktop mode with Vector 2022 skin.Aug 15 2022, 11:04 AM

This looks like a great first task! However, there might be some complications arising from the fact that we are effectively changing the desktop view to support a seemingly mobile experience. So we should make sure to thoroughly test this manually. If this turns out to be more complex than envisioned, feel free to flag it up, and we will take it back to the drawing board.

After a bit of experimenting, I came up with these changes:

  • To .wikibase-snakview-body, add min-width: 12em;
  • To .wikibase-statementgroupview, add min-width: fit-content; padding-right: 2em;

Which generates this for a 500px width window:

Web capture_27-8-2022_10534_www.wikidata.org.jpeg (13×729 px, 720 KB)

and makes no visible changes for larger, desktop-sized resolutions.

It does cause the statement boxes to extend outside of the page container, and cause the edit icons to come out of alignment, but the only way around that would be to extend the entire page to the right, so I think this is preferable?

That looks great! Thank you so much. It looks like it also fixes the same issue the input field for the qualifier has:

IMG_20220828_154037.jpg (505×1 px, 35 KB)

Change 827614 had a related patch set uploaded (by WelpThatWorked; author: WelpThatWorked):

[mediawiki/extensions/Wikibase@master] Prevent text box crushing by adding min-width and allowing boxes to extend beyond container edge.

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

I've added the proposed changes and dont see much of an improvement? Only when you're adding a new statement seems the be an improvement.

Some screengrabs:

Screenshot_20230816_190358_Yuzu Browser.jpg (2×1 px, 342 KB)

Screenshot_20230816_190348_Yuzu Browser.jpg (2×1 px, 296 KB)

Screenshot_20230816_190426_Yuzu Browser.jpg (2×1 px, 342 KB)

Screenshot_20230816_190332_Yuzu Browser.jpg (2×1 px, 383 KB)

Screenshot_20230816_190322_Yuzu Browser.jpg (2×1 px, 187 KB)

Pppery renamed this task from [Bug] Wikidata reference text field 0px width on mobile browser in desktop mode with Vector 2022 skin to Wikidata reference text field 0px width on mobile browser in desktop mode with Vector 2022 skin.Apr 30 2024, 4:07 AM
Pppery edited projects, added Patch-Needs-Improvement; removed Patch-For-Review.

This is still an issue btw. If I follow the gerrit link above there seems to have been a merge issue? Would be great if this was fixed.

@1Veertje i brought the patch back to life, but im also not very familiar with wikibase. i'll see if someone can help out.

Hey there, task subscribers! @LucasWerkmeister and I just met with the intention of reviewing this report's patch. Although I'd swear I did in the past (this morning), we are no longer able to reproduce the issue, even after carefully following all the steps on desktop and mobile devices. Does the problem persist for anyone here? Thank you for letting us know!

Screenshot 2024-06-19 at 18.04.50.png (778×972 px, 140 KB)

PS: We'll look into what's causing the oversized "Lexicographical data" menu title 🤔

Moving out of our peer review column, since it’s unclear if the issue still happens at all. (I also haven’t been able to reproduce the giant “lexicographical data” menu heading on my end, FWIW.)

OK so this looks like it's happening for me still, and potentially worse:

image.png (96×1 px, 13 KB)