Page MenuHomePhabricator
Create Task
Maniphest T264206

Decrease minimum width for Vector
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

NOTE: T258116 needs to be done first
NOTE: Blocked on completion of the A/B test for the search in header move. Do not touch prior to November 4, 2020
NOTE: T264218 follows this up by removing it altogether

Background

We introduced a minimum width as a way to avoid having to keep compatibility with the previous HTML structure which used absolute positioning. With the new changes introduced to the DOM order and the change safely in production we can minimize or completely remove this minimum width.

Acceptance criteria

  • Reduce minimum width to 646px so that it doesn't include the personal tools in its calculation, allowing the personal tools to drop underneath the search box and logo

QA Results - Beta

ACStatusDetails
1✅T264206#6598762

QA Results - Prod

ACStatusDetails
1✅T264206#6622348

Details

SubjectRepoBranchLines +/-
Reduce min-width so it doesn't include personal toolsmediawiki/skins/Vectormaster+2 -2
Customize query in gerrit

Related Objects
Search...

Event Timeline

ovasileva created this task.Sep 30 2020, 3:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 30 2020, 3:19 PM
ovasileva triaged this task as High priority.Sep 30 2020, 3:19 PM
ovasileva updated the task description. (Show Details)
ovasileva added subscribers: • alexhollender_WMF, Jdlrobson.
Volker_E subscribed.Sep 30 2020, 3:46 PM
gerritbot added a comment.Sep 30 2020, 5:21 PM

Change 631215 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Reduce min-width so it doesn't include personal tools

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

gerritbot added a project: Patch-For-Review.Sep 30 2020, 5:21 PM
Jdlrobson renamed this task from Remove or decrease minimum width for Vector to Decrease minimum width for Vector .Sep 30 2020, 5:24 PM
Jdlrobson updated the task description. (Show Details)

I've split out the removal, as the work involved is different. We can always decline this if we decide to remove outright.

Jdlrobson updated the task description. (Show Details)Sep 30 2020, 5:29 PM
Jdlrobson moved this task from Needs Analysis to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson updated the task description. (Show Details)Oct 1 2020, 6:06 PM
ovasileva moved this task from Blocked on Others to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Oct 7 2020, 5:19 PM
ovasileva moved this task from Upcoming to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson updated the task description. (Show Details)Oct 8 2020, 11:21 PM
Jdlrobson mentioned this in T258116: Post deploy: Move search styles into layout.less (and other places) and remove temporary feature flags.Oct 9 2020, 9:27 PM
Jdlrobson moved this task from Blocked on Others to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Given the train delay, this can be worked on next week. Even if the changes are merged on Monday the A/B test will have concluded, before this code has ridden the train. The fix here is super trivial in comparison to T264206, so I'd advise doing it anyway even if we work on T264206 which will likely take a little longer.

ovasileva added a comment.Oct 13 2020, 9:01 AM

@Jdlrobson, @alexhollender - that sounds good. Did we decide on what we were going to lower it to? 500px?

Jdlrobson added a comment.Oct 13 2020, 5:01 PM

The current implementation of the header will work perfectly fine up to 646px (40.375em) with the relaxation of fixed height so we'd drop to that value. It will need some tweaks in T264218 to be optimized any lower than that.

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2020-21).Oct 13 2020, 5:23 PM
Jdlrobson assigned this task to ovasileva.Oct 13 2020, 5:24 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.Oct 13 2020, 6:46 PM
ovasileva updated the task description. (Show Details)Oct 21 2020, 4:09 PM
phuedx added a parent task: T264218: Lower Vector min-width to 500px.Oct 21 2020, 4:09 PM
phuedx added a subtask: T258116: Post deploy: Move search styles into layout.less (and other places) and remove temporary feature flags.
ovasileva updated the task description. (Show Details)Oct 21 2020, 4:12 PM
phuedx updated the task description. (Show Details)Oct 21 2020, 4:15 PM
ovasileva updated the task description. (Show Details)Oct 21 2020, 4:16 PM
ovasileva set the point value for this task to 2.
Jdlrobson moved this task from Upcoming to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Oct 28 2020, 9:57 PM
Jdlrobson reassigned this task from ovasileva to Edtadros.Oct 28 2020, 11:00 PM
Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Oct 28 2020, 11:03 PM

Change 631215 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Reduce min-width so it doesn't include personal tools

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

Maintenance_bot removed a project: Patch-For-Review.Oct 28 2020, 11:10 PM
ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.16; 2020-11-03).Oct 29 2020, 12:00 AM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Nov 3 2020, 2:47 AM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Reduce minimum width to 646px so that it doesn't include the personal tools in its calculation, allowing the personal tools to drop underneath the search box and logo

Screen Shot 2020-11-02 at 6.45.23 PM.png (315×689 px, 76 KB)

Edtadros updated the task description. (Show Details)Nov 3 2020, 2:47 AM
Edtadros updated the task description. (Show Details)Nov 3 2020, 4:59 PM
Jdlrobson mentioned this in T267325: "More" tab dropdown options go off-screen in RTL when there are no margins.Nov 5 2020, 5:03 PM
Edtadros reassigned this task from Edtadros to ovasileva.Nov 15 2020, 12:21 AM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: Prod
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Reduce minimum width to 646px so that it doesn't include the personal tools in its calculation, allowing the personal tools to drop underneath the search box and logo

Screen Shot 2020-11-14 at 4.19.23 PM.png (330×654 px, 90 KB)

Edtadros updated the task description. (Show Details)Nov 15 2020, 12:26 AM
ovasileva closed this task as Resolved.Nov 17 2020, 2:16 PM

All done!

Jdlrobson closed subtask T258116: Post deploy: Move search styles into layout.less (and other places) and remove temporary feature flags as Resolved.Nov 24 2020, 7:25 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 · Credits