Page MenuHomePhabricator

[User links] remove margin-left: auto on search box
Open, MediumPublic2 Estimated Story Points

Description

Description

At 1250px (or 78.678em) the search box switches from having margin-left: 0 to having margin-left: auto.

Here are the two relevant css rules:

// Above 1250px

#p-search > #searchform, #p-search .wvui-typeahead-search {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0;
    max-width: 35.71428571em;
}
// Below 1250px

@media screen and (max-width: 78.67857143em)
#p-search > #searchform, #p-search .wvui-typeahead-search {
    margin-left: auto;
}

This is no longer necessary/desired with the recent updates to the user links stuff, so we should remove it.

To-dos

  • remove the css for margin: auto
  • check to see if other features are using the 1250px breakpoint, if not remove the breakpoint entirely

Event Timeline

here is a video of the search bar moving as a result of the CSS in the task description

I think this translates to 1258px as its a calculated value of widths with margins and paddings added.

@max-width-margin-start-content:
	(2 * @margin-start-content ) +
	( 2 * @padding-horizontal-page-container ) +
	@max-width-content-container;
ovasileva triaged this task as Medium priority.Mon, Jul 19, 10:53 AM

Not a blocker according to Alex but I think this should be relatively straightforward to fix.

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

[mediawiki/skins/Vector@master] Remove margin-left: auto on search box to prevent it from switching sides

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

bwang removed bwang as the assignee of this task.Thu, Jul 22, 5:49 PM
bwang added a subscriber: bwang.

Change 706636 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove margin-left: auto on search box to prevent it from switching sides

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