Page MenuHomePhabricator

Add a link: Adjust link inspector layout to fit buttons without overlapping text if button text is long
Closed, ResolvedPublic

Description

Leftover item from T269644:
Expected:

There is a mock in the spec showing the desired overflow behavior in cases where the translations for "Yes", "No" and "Next" are long. In this case, the card should become taller, the "Yes" and "No" buttons should be in the same place, the left and right arrow buttons should be on the next line down.

addlink-overflow-1.png (401×274 px, 41 KB)
addlink-overflow-2.png (690×475 px, 76 KB)

Actual:
No change if button text is long.

image.png (1×844 px, 179 KB)

Event Timeline

kostajh moved this task from Backlog to May 10 - May 14 on the Add-Link board.

This mostly works as intended (browser difference? or just outdated?):

addlink-overflow-desktop.png (346×433 px, 52 KB)
addlink-overflow-mobile.png (252×305 px, 20 KB)

Unlike on the mock, "No" breaks to a separate row if the button texts doesn't fit. I'll see if it's easy to fix that (although the current setup looks more usable to me). And of course it shouldn't overflow the screen on mobile.

@RHo Did you happen to change the button text via web inspector? Currently the logic is set up to calculate the overflow during render so unfortunately changing the text via inspecting won't work.

@RHo Did you happen to change the button text via web inspector? Currently the logic is set up to calculate the overflow during render so unfortunately changing the text via inspecting won't work.

Oh derp yes, thanks @mewoph for clarifying. However, should I keep this task open if @Tgr you wanted to address the overflow on mobile issue?

This mostly works as intended (browser difference? or just outdated?):

addlink-overflow-desktop.png (346×433 px, 52 KB)
addlink-overflow-mobile.png (252×305 px, 20 KB)

Unlike on the mock, "No" breaks to a separate row if the button texts doesn't fit. I'll see if it's easy to fix that (although the current setup looks more usable to me). And of course it shouldn't overflow the screen on mobile.

Change 689364 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Add Link: Handle long buttons in RecommendedLinkToolbarDialog

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

Etonkovidova subscribed.

As per @Tgr comment and screenshots, the long labels should be handled correctly. The screenshot with uselang=qqx shows the same behavior for buttons placement:

Screen Shot 2021-05-14 at 5.32.27 PM.png (1×2 px, 497 KB)

Change 689364 abandoned by Kosta Harlan:

[mediawiki/extensions/GrowthExperiments@master] [WIP] Add Link: Handle long buttons in RecommendedLinkToolbarDialog

Reason:

Cleaning up code review backlog for GrowthExperiments. If you still plan to work on this, then please restore the change.

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