Page MenuHomePhabricator

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



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.


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

QA Results - Beta


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.

	(2 * @margin-start-content ) +
	( 2 * @padding-horizontal-page-container ) +
ovasileva triaged this task as Medium priority.Jul 19 2021, 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

bwang removed bwang as the assignee of this task.Jul 22 2021, 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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Verify search box left margin remains 0 at widths above and below 1250px.

Screen Recording 2021-07-26 at 7.00.54 (520×1 px, 2 MB)

Edtadros added a subscriber: Edtadros.

@ovasileva, I'm moving this to Ready for Signoff since it is User Links related.