(Go: >> BACK << -|- >> HOME <<)

Page MenuHomePhabricator

Add max-width to search in sticky header
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

The search bar in the sticky header should have a max-width.

Design

prototype: https://di-collapsible-menus.web.app/Brown_bear

image.png (1×2 px, 1 MB)

QA Results - Beta

ACStatusDetails
1T310366#8013327

QA Results -Prod

ACStatusDetails
1T310366#8027319

Event Timeline

ovasileva subscribed.

@alexhollender_WMF The code originally has the sticky header search bar set to a max width of 500px. Do you want me to change that to 520px?

Also do you mind reminding me, should the collapsed search bar also have a max width? https://jmp.sh/BE9XEAA

@alexhollender_WMF The code originally has the sticky header search bar set to a max width of 500px. Do you want me to change that to 520px?

Thanks for pointing that out. 520px (including the width of the search bar + the search button) would be great, as it matches the main search bar in the site header.

Also do you mind reminding me, should the collapsed search bar also have a max width? https://jmp.sh/BE9XEAA

Hmm, good question. I think the transition from collapsed to uncollapsed will look better without a max-width there. If it has a max-width, and the screen is wide enough, it ends up feeling like it does a little jump:

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

[mediawiki/skins/Vector@master] Fix sticky header searchbox width and misc searchbox CSS cleanup

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

bwang removed bwang as the assignee of this task.Jun 14 2022, 4:16 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang subscribed.

Change 805231 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix sticky header searchbox width and misc searchbox CSS cleanup

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

ovasileva added a subscriber: nray.
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS ( per T310366#8017429 )
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: The search bar in the sticky header should have a max-width.

@alexhollender_WMF, I get 524px and 522px, not 520px shown in the task description. The search field does have a max-width and doesn't change no matter how wide I make the page. Is this acceptable?

Screen Shot 2022-06-18 at 6.38.34 PM.png (609×1 px, 281 KB)

Screen Shot 2022-06-18 at 6.38.20 PM.png (610×1 px, 287 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: The search bar in the sticky header should have a max-width.

Pass per T310366#8017429

Screen Shot 2022-06-25 at 6.12.07 PM.png (410×1 px, 168 KB)

Screen Shot 2022-06-25 at 6.12.24 PM.png (478×1 px, 197 KB)