Page MenuHomePhabricator

Search field is too narrow on wide screens and too wide on narrow screens
Closed, ResolvedPublic


The search field we have right now is of a fixed width. And especially on more narrow screens that is particularly annoying, since tabs quickly drop to the next line. On the other hand, if you have a 27" screen, you almost have to look for the search field with a literal magnifier to find it.

For the past months, we have had a CSS change live on the English Wikipedia, that changes this for browsers that support viewport units. It has had 0 negative feedback, since it was deployed. It's time to bring it to the rest of the users.

Event Timeline

TheDJ created this task.Oct 31 2015, 12:41 PM
TheDJ claimed this task.
TheDJ raised the priority of this task from to Medium.
TheDJ updated the task description. (Show Details)
TheDJ added projects: Vector, Discovery.
TheDJ added subscribers: matmarex, TheDJ, Edokter, Deskana.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 31 2015, 12:41 PM

Change 250187 had a related patch set uploaded (by TheDJ):
Viewport dependant sizing of the search field

GOIII added a subscriber: GOIII.Nov 1 2015, 6:21 AM

@TheDJ : Not that I'm against making a change along the lines you've outlined but I'm not sure the values applied are "optimal".

On my 27 inch monitor for example, the width value of 20vw roughly makes for a div#simpleSearch rendered width of ~17em so a max-width: set to 20em never really gets achieved. Changing width: to 25vm produces the desired effect as would changing the max-width: to 16em instead.

Not a reason to balk at what amounts to splitting hairs but figure best to point it out anyway.

I just wish they'd do away with screen-hd.less and follow your viewport percentage approach instead (if anything at all).

Change 250187 merged by jenkins-bot:
Viewport dependant sizing of the search field

TheDJ closed this task as Resolved.Nov 2 2015, 3:31 PM
TheDJ removed a project: Patch-For-Review.
TheDJ set Security to None.