Page MenuHomePhabricator

[UI glitch] Representation widgets overlapping toolbar buttons when too many
Closed, ResolvedPublic

Description

Adding many form representations, the individual representation widgets - rendered next to each other - overlap the form representation toolbar buttons (depending on screen width). The overlapped widgets' remove buttons are not usable.
This may or may not be a problem in CI, too, where the resolution seems to be at 800x600.

Bildschirmfoto vom 2018-05-22 16-32-44.png (1×1 px, 173 KB)

can-remove-representation.png (600×800 px, 97 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Lydia_Pintscher renamed this task from Representation widgets overlapping toolbar buttons to [UI glitch] Representation widgets overlapping toolbar buttons when too many.May 27 2018, 3:16 PM

This looks meh but my assumption is that people won't encounter this often because most Lexemes have one or two Lemmas.

Depending on screen resolution this situation can occur way earlier.

can-remove-representation.png (600×800 px, 97 KB)

Change 441034 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/WikibaseLexeme@master] Representation widget: prevent bleed into buttons

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

Change 441034 merged by Pablo Grass (WMDE):
[mediawiki/extensions/WikibaseLexeme@master] Representation widget: prevent bleed into buttons

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

Yay :)

One remaining issue: For me the "Lemma" in the second row still overlaps the input box of the first row. Is there anything we can do about that?

Screenshot_20180620_170548.png (492×1 px, 34 KB)

@Lydia_Pintscher This is a really interesting behavior because these boxes are configured to (and that's how it also works for me) float around each other - I have trouble to imaging a way how they could bleed into each other; same goes for the input fields/labels overlapping the (blue) border. Where did you observe this? *looking at that centralnotice banner* Which browser did you use, can you solve it be clearing the cache? Thanks

We looked at it together in person. Result: on beta, in Chromium. Reload didn't change anything.

This is mildly disturbing but interesting.
Lexeme header editing happens all within the page's h1 (T196228), hence a serif font is used (font-family: 'Linux Libertine','Georgia','Times',serif;) - depending on which one is actually installed this could yield different values for font-related dimension (em, ...). I'll look into that a bit.

@Lydia_Pintscher Does the same thing happen in production already? Becuase, if so, it's - strictly speaking - not part of this ticket.

Seem to be able to produce a similar effect by changing the base font size of the browser.

Bildschirmfoto von 2018-06-22 10-05-53.png (744×1 px, 78 KB)
Bildschirmfoto von 2018-06-22 10-09-19.png (744×1 px, 116 KB)
Bildschirmfoto von 2018-06-22 10-09-07.png (744×1 px, 108 KB)

As this happens both on beta and production I do not consider this part of this ticket (also this ticket here is about form representations, not lexeme lemmas) - should go into a dedicated ticket => T197929

Vvjjkkii renamed this task from [UI glitch] Representation widgets overlapping toolbar buttons when too many to dicaaaaaaa.Jul 1 2018, 1:09 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Lydia_Pintscher as the assignee of this task.
Vvjjkkii raised the priority of this task from Low to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from dicaaaaaaa to [UI glitch] Representation widgets overlapping toolbar buttons when too many.Jul 2 2018, 1:24 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to Lydia_Pintscher.
CommunityTechBot lowered the priority of this task from High to Low.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.