Page MenuHomePhabricator
Create Task
Maniphest T277315

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

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
1✅T277315#7147776

Details

ProjectBranchLines +/-Subject
mediawiki/coremaster+66 -52Update WVUI to v0.1.1
wvuimaster+3 -0[typeahead-search] Prevent search button text from overflowing on small screens
Customize query in gerrit

Related Objects

Event Timeline

nray created this task.Mar 12 2021, 4:51 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptMar 12 2021, 4:51 PM
nray added a comment.Mar 12 2021, 4:52 PM

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

nray moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.Mar 12 2021, 5:31 PM
Ankur21980 claimed this task.Mar 13 2021, 5:21 PM
Ankur21980 added a subscriber: Ankur21980.

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

nray added a comment.EditedMar 16 2021, 10:09 PM

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

Ankur21980 added a comment.Mar 18 2021, 11:17 AM

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.

Ankur21980 added a comment.Mar 18 2021, 11:21 AM

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)

Aklapper added a comment.EditedMar 18 2021, 11:45 AM

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 reassigned this task from Ankur21980 to ovasileva.Mar 26 2021, 8:50 PM
Jdlrobson moved this task from Triaged but Future to Needs Prioritization on the Readers-Web-Backlog board.
ovasileva edited projects, added Readers-Web-Backlog (Kanbanana-FY-2020-21); removed Readers-Web-Backlog.Mar 29 2021, 8:23 AM
ovasileva triaged this task as High priority.Apr 2 2021, 8:51 AM
Jdlrobson removed ovasileva as the assignee of this task.Apr 2 2021, 4:30 PM
Jdlrobson added a subscriber: ovasileva.
LGoto moved this task from Needs Analysis to Upcoming on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Apr 6 2021, 5:32 PM
LGoto set the point value for this task to 3.Apr 6 2021, 5:37 PM
LGoto moved this task from Upcoming to Ready for Development on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
bwang moved this task from Ready for Development to Doing on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Apr 8 2021, 7:27 PM
bwang moved this task from Doing to Ready for Development on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
Anishdutta11 added a subscriber: Anishdutta11.Apr 12 2021, 7:30 PM

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 mentioned this in T279984: Update the front-page of Wikimedia projects .Apr 13 2021, 7:19 AM
ovasileva added a subscriber: alexhollender.Apr 13 2021, 6:21 PM
ovasileva added a comment.Apr 14 2021, 1:40 PM
In T277315#6992102, @Anishdutta11 wrote:

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

bwang added a subscriber: bwang.Apr 14 2021, 5:50 PM

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

nray added a comment.EditedApr 14 2021, 8:34 PM
In T277315#6992102, @Anishdutta11 wrote:

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

Jdlrobson mentioned this in T277256: Bangla letters are getting broken in the search box .Apr 14 2021, 9:08 PM
bwang claimed this task.Apr 14 2021, 10:01 PM
bwang changed the point value for this task from 3 to 2.
Jdlrobson moved this task from Ready for Development to Doing on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Apr 15 2021, 1:33 AM
gerritbot added a comment.Apr 15 2021, 2:17 PM

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

gerritbot added a project: Patch-For-Review.Apr 15 2021, 2:17 PM
bwang removed bwang as the assignee of this task.Apr 15 2021, 5:16 PM
bwang moved this task from Doing to Code Review on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
phuedx assigned this task to Volker_E.Apr 19 2021, 2:32 PM
phuedx added a subscriber: phuedx.

☝️ per the comments on both patches.

Volker_E moved this task from Code Review to Blocked on Others on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Apr 19 2021, 8:54 PM
Volker_E removed a project: Patch-For-Review.
gerritbot added a comment.Apr 19 2021, 10:54 PM

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

VolkerE <volker.e@wikimedia.org> mentioned this in rWVUI5614f521142e: [typeahead-search] Prevent search button text from overflowing on small screens.Apr 19 2021, 10:54 PM
Volker_E updated the task description. (Show Details)Apr 19 2021, 11:55 PM
gerritbot added a comment.Apr 23 2021, 8:15 PM

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

gerritbot added a project: Patch-For-Review.Apr 23 2021, 8:15 PM
gerritbot added a comment.Apr 23 2021, 9:10 PM

Change 682196 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Apr 23 2021, 9:11 PM
Volker_E reassigned this task from Volker_E to Edtadros.Apr 24 2021, 9:11 AM
Volker_E moved this task from Blocked on Others to QA on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
Volker_E added a subscriber: Volker_E.
Edtadros reassigned this task from Edtadros to Volker_E.Apr 27 2021, 2:07 AM
Edtadros moved this task from QA to Needs More Work on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
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)Apr 27 2021, 2:08 AM
Edtadros updated the task description. (Show Details)
bwang removed Volker_E as the assignee of this task.May 3 2021, 5:33 PM
bwang assigned this task to Volker_E.
bwang moved this task from Needs More Work to Code Review on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
bwang moved this task from Code Review to Needs More Work on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
bwang added a comment.May 3 2021, 5:39 PM

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?

Volker_E added a comment.EditedMay 4 2021, 10:52 AM

Can reproduce missing button flex-shrink on beta.

ovasileva removed Volker_E as the assignee of this task.May 25 2021, 5:43 PM
Jdlrobson moved this task from Needs More Work to Blocked on Others on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Jun 1 2021, 11:15 PM
Jdlrobson added a subscriber: Jdlrobson.

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

Jdlrobson assigned this task to Edtadros.Jun 2 2021, 7:42 PM
Jdlrobson moved this task from Blocked on Others to QA on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
Edtadros moved this task from QA to QA in Prod on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.Jun 10 2021, 6:57 AM

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)Jun 10 2021, 6:58 AM
Edtadros updated the task description. (Show Details)
Edtadros reassigned this task from Edtadros to Jdlrobson.Jun 14 2021, 5:08 PM

Assigning to you per standup.

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Jun 14 2021, 11:02 PM

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

Edtadros reassigned this task from Edtadros to ovasileva.Jun 16 2021, 12:55 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.

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)

Volker_E moved this task from Backlog to Done on the WVUI board.Jun 16 2021, 5:45 PM
ovasileva closed this task as Resolved.Jun 17 2021, 8:54 AM

Looks good!

Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL