Page MenuHomePhabricator
Create Task
Maniphest T117316

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

Description

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.

Details

SubjectRepoBranchLines +/-
Viewport dependant sizing of the search fieldmediawiki/skins/Vectormaster+3 -0
Customize query in gerrit

Related Objects
Search...

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 (legacy skin), Discovery-ARCHIVED.
TheDJ added subscribers: matmarex, TheDJ, Edokter, • Deskana.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 31 2015, 12:41 PM
TheDJ added a parent task: T56919: [collapsibleTabs] Tabs (Read / View Source / Search) wrap to next line and cover content if screen width < ~700px.Oct 31 2015, 12:42 PM
gerritbot subscribed.Oct 31 2015, 12:44 PM

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

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

gerritbot added a project: Patch-For-Review.Oct 31 2015, 12:44 PM
TheDJ added a comment.Oct 31 2015, 12:45 PM

Deployed on en.wp on the 14th of july: https://en.wikipedia.org/wiki/MediaWiki:Vector.css

GOIII subscribed.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).

gerritbot added a comment.Nov 2 2015, 2:39 PM

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

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

ReleaseTaggerBot added a project: MW-1.27-release (WMF-deploy-2015-11-03_(1.27.0-wmf.5)).Nov 2 2015, 3:00 PM
TheDJ closed this task as Resolved.Nov 2 2015, 3:31 PM
TheDJ removed a project: Patch-For-Review.
TheDJ set Security to None.
• Deskana added a comment.Nov 2 2015, 3:32 PM

Thanks @TheDJ!

GOIII mentioned this in T85329: Increase size of Search box on front page.Dec 11 2015, 4:33 AM
TheDJ mentioned this in rSVEV35bfc07b46d3: Viewport dependant sizing of the search field.Mar 8 2016, 3:29 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and 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