Page MenuHomePhabricator

[User links] remove margin-left: auto on search box
Closed, ResolvedPublic2 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

QA Results - Beta

ACStatusDetails
1T286733#7236315

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.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

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

bwang removed bwang as the assignee of this task.Jul 22 2021, 5:49 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
bwang subscribed.

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

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 AM.mov.gif (520×1 px, 2 MB)

Edtadros subscribed.

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