Page MenuHomePhabricator

WVUI Search component's "Search for pages containing" text can overflow
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Steps to Reproduce:

  1. Visit https://en.wikipedia.org/wiki/Barack_Obama?useskinversion=2
  2. Copy and paste "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" into input

Actual Results:
The suggestions footer's text overflows its container

Screen Shot 2021-04-01 at 11.18.11 AM.png (558×2 px, 233 KB)

Expected Results:

The suggestions footer's text does not overflow its container

Developer Notes

This bug can be replicated in WVUI storybook so the problem is in WVUI.

Something like the following might work

.wvui-typeahead-search__suggestions__footer__text {
    text-overflow: ellipsis;
    overflow: hidden;
}

.wvui-typeahead-search__suggestions-footer-article-icon {
  // Prevent the icon container from shrinking when large text is present
  flex-shrink: 0;

}

QA Results - Beta

ACStatusDetails
1T279088#7036635

QA Results -Prod

ACStatusDetails
1T279088#7053964

Event Timeline

nray renamed this task from WVUI Search "Search for pages containing" text overflow to WVUI Search component's "Search for pages containing" text can overflow.Apr 1 2021, 5:24 PM

@alexhollender Any thoughts on how the text should behave here (e.g. ellipsis vs. hidden vs. wrapping, etc)?

@alexhollender Any thoughts on how the text should behave here (e.g. ellipsis vs. hidden vs. wrapping, etc)?

ellipsis sounds good

LGoto set the point value for this task to 2.Apr 6 2021, 5:34 PM

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

[wvui@master] Handle text overflow in TypeaheadSearch search suggestion footer by using ellipsis

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

Change 678076 merged by jenkins-bot:

[wvui@master] [typeahead-search] Handle text overflow in search suggestion footer by using ellipsis

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

Edtadros subscribed.

Test Result - Beta|Prod

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

Test Artifact(s):

QA Steps

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama?useskinversion=2
Copy and paste "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" into input
❌ AC1: The suggestions footer's text does not overflow its container

Screen Shot 2021-04-14 at 8.27.59 PM.png (536×1 px, 301 KB)

@Jdrewniak I fully expected this to pass coming from you. Let me know if I needed to test this on a different page.

I believe we need to release WVUI before this will be fixed in prod, is that right? @Jdrewniak

@bwang yeah, I moved this into QA to quickly...

can we QA in storybook or patchdemo ?
(obviously QA in production is blocked)

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama?useskinversion=2
Copy and paste "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" into input
✅ AC1: The suggestions footer's text does not overflow its container

Screen Shot 2021-04-26 at 7.11.04 PM.png (206×892 px, 38 KB)

NICE!!!

Test Result - Prod

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

Test Artifact(s):

QA Steps

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama?useskinversion=2
Copy and paste "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" into input
✅ AC1: The suggestions footer's text does not overflow its container

Screen Shot 2021-05-03 at 9.47.38 AM.png (215×819 px, 48 KB)

Looks good, resolving