Page MenuHomePhabricator

[Bug] WVUI search button text overflows at small viewport widths
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Steps to reproduce

  1. Visit https://fr.wikipedia.org/
  2. Focus search input so that WVUI search loads and search button appears
  3. Set browser viewport width to <= 500px

Expected results

  • The search button text "Rechercher" does not overflow button

Actual results

  • The search button text "Rechercher" overflows button

Screen Shot 2021-03-12 at 9.45.33 AM.png (188×1 px, 54 KB)

Check any additional observations

Developer Notes

Seems like flex-shrink: 0 might work well here

BeforeAfter
T277315 before (88×406 px, 12 KB)
T277315 after (84×364 px, 10 KB)

QA Results - Beta

ACStatusDetails
1T277315#7147776

Event Timeline

This might be a good task for Clare or Bernard to work on

Ankur21980 added a subscriber: Ankur21980.

Hey @nray I would like to work on this issue. So can you please guide me.

Hi @Ankur21980,

Thank you for your interest! It looks like this issue is reproducible in our WVUI repository and can be seen with the TypeaheadSearch component on Storybook although I had to manually change the .sb-typeahead-search container to width: 200px in order to see it:

Screen Shot 2021-03-16 at 4.05.36 PM.png (1×2 px, 214 KB)

Hopefully, our README is sufficient to get started with the repo, but please ping me on this ticket if that is not the case: https://gerrit.wikimedia.org/r/plugins/gitiles/wvui#quick-start

Hey @nray I am not able to locate the file that contains the particular issue, Could you please provide me a proper path and also I not able to find the github repo of this project.

image.png (639×1 px, 84 KB)

I am also getting the following error while executing the command: docker-compose build --build-arg UID=$(id -u) --build-arg GID=$(id -g) --build-arg HOST=$(uname -s)

Hi, @Ankur21980, I already linked to the repository was already linked in the previous comment; I don't understand why this is brought up again. Please follow https://www.mediawiki.org/wiki/New_Developers . For general Docker issues not related to the topic of this task, please use Zulip or a support forum. Thanks a lot.

Jdlrobson added a subscriber: ovasileva.

Wikipédia, l'encyclopédie libre - Google Chrome 13-04-2021 00_54_11 (2).png (889×625 px, 72 KB)

Apparently, as you can see the issue was fixed with a minor change. I removed the max-width and min-width property from CSS and kind of worked. @nray do have a look at this.

Wikipédia, l'encyclopédie libre - Google Chrome 13-04-2021 00_54_11 (2).png (889×625 px, 72 KB)

Apparently, as you can see the issue was fixed with a minor change. I removed the max-width and min-width property from CSS and kind of worked. @nray do have a look at this.

Discussed this with @alexhollender - seems like a good way to move forward

Hi @Anishdutta11, are you planning to submit a patch for that change? I couldn't find a corresponding patch in wvui.

Wikipédia, l'encyclopédie libre - Google Chrome 13-04-2021 00_54_11 (2).png (889×625 px, 72 KB)

Apparently, as you can see the issue was fixed with a minor change. I removed the max-width and min-width property from CSS and kind of worked. @nray do have a look at this.

@Anishdutta11 There are multiple ways of going about this and removing the min-width has crossed my mind [1], but applying a flex-shrink: 0 might be better to address the concerns raised in that patch

[1] https://gerrit.wikimedia.org/r/c/wvui/+/655798

bwang changed the point value for this task from 3 to 2.

Change 679509 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[wvui@master] [typeahead-search] Prevent search button text from overflowing on small screens

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

bwang removed bwang as the assignee of this task.Apr 15 2021, 5:16 PM
phuedx added a subscriber: phuedx.

☝️ per the comments on both patches.

Change 679509 merged by jenkins-bot:

[wvui@master] [typeahead-search] Prevent search button text from overflowing on small screens

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

Change 682196 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update WVUI to v0.1.1

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

Change 682196 merged by jenkins-bot:

[mediawiki/core@master] Update WVUI to v0.1.1

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

Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps to reproduce

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page. (?uselang=fr for French)
  2. Focus search input so that WVUI search loads and search button appears
  3. Set browser viewport width to <= 500px

Expected results

❌ AC1: The search button text "Rechercher" does not overflow the button

Screen Shot 2021-04-26 at 7.05.03 PM.png (104×487 px, 22 KB)

Screen Shot 2021-04-26 at 7.05.22 PM.png (107×503 px, 23 KB)

@Volker_E the button text still appears to be cut off.

Edtadros updated the task description. (Show Details)

I took a look at the CSS in the beta cluster, and I didn't see the styles added by this patch. Is it possible that the beta cluster still doesn't have WVUI v0.1.1 release?

Can reproduce missing button flex-shrink on beta.

Jdlrobson added a subscriber: Jdlrobson.

@Volker_E can you confirm if QA here is blocked on a WVUI release?

Test Result - Beta

Status: ✅ Pass
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps to reproduce

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page. (?uselang=fr for French)
  2. Focus search input so that WVUI search loads and search button appears
  3. Set browser viewport width to <= 500px

Expected results

✅ AC1: The search button text "Rechercher" does not overflow the button

Screen Shot 2021-06-09 at 11.56.10 PM.png (795×505 px, 101 KB)

Screen Shot 2021-06-09 at 11.55.00 PM.png (778×504 px, 100 KB)

Edtadros updated the task description. (Show Details)

Assigning to you per standup.

This can be QAed in production today. I recommend using https://de.wikipedia.org/?useskinversion=2

Test Result - Prod

Status: ✅ Pass
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps to reproduce

  1. Visit a page on dewiki and frwiki
  2. Focus search input so that WVUI search loads and search button appears
  3. Set browser viewport width to <= 500px

Expected results

✅ AC1: The search button text "Rechercher" does not overflow the button

Screen Shot 2021-06-16 at 5.53.49 AM.png (372×487 px, 82 KB)

Screen Shot 2021-06-16 at 5.52.15 AM.png (443×489 px, 82 KB)