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

Assigned To

Authored By

	nray
	Mar 12 2021, 4:51 PM

Description

Steps to reproduce

Visit https://fr.wikipedia.org/
Focus search input so that WVUI search loads and search button appears
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

Check any additional observations

Observed on the beta cluster wiki
Observed on a production wiki
Observed on Vector desktop skin
Observed on MinervaNeue responsive skin
Observed while logged in
Observed while not logged in (anonymous)

Developer Notes

Seems like flex-shrink: 0 might work well here

Before	After

QA Results - Beta

AC	Status	Details
1	✅	T277315#7147776

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/core	master	+66 -52	Update WVUI to v0.1.1
	wvui	master	+3 -0	[typeahead-search] Prevent search button text from overflowing on small screens

Customize query in gerrit

Related Objects

Mentioned In: rWVUI5614f521142e: [typeahead-search] Prevent search button text from overflowing on small screens
T277256: Bangla letters are getting broken in the search box
T279984: Update the front-page of Wikimedia projects

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

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

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.

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 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.

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_WMF.Apr 13 2021, 6:21 PM

In T277315#6992102, @Anishdutta11 wrote:

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.

In T277315#6992102, @Anishdutta11 wrote:

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

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.

☝️ 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.

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

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

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.

Test Result - Beta

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

Test Artifact(s):

QA Steps