Maniphest T222003

Homepage: widescreen homepage is stretched
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	MMiller_WMF
	Apr 26 2019, 11:52 PM

Description

In the screenshot below, you can see how the homepage looks when using a widescreen monitor.

All the modules are really widely stretched. I wonder if there is a way to display them so that they have a maximum width or something. This is not needed for the May 2 release.

Details

	Subject	Repo	Branch	Lines +/-
	Move the help module to the bottom on small screens	mediawiki/extensions/GrowthExperiments	master	+20 -1
	Homepage: UI fixes	mediawiki/extensions/GrowthExperiments	master	+3 -0

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		• Rileych	T213990 [EPIC] Growth: Newcomer homepage
		Resolved		SBisson	T222003 Homepage: widescreen homepage is stretched

Event Timeline

Assigning this first to @Cntlsn for him to make a recommendation. Note: this is not needed for the May 2 initial release.

@MMiller_WMF It could "temporarily" be fixed with

.growthexperiments-homepage-container {
  max-width: 1215px;
}

And I think it could make it to the May 2 release, @Catrope what do you think?

Change 507013 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

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

gerritbot added a project: Patch-For-Review.Apr 29 2019, 1:20 PM

I've made a patch to set max-width: 1215px; and min-width: 860px; to prevent the content from overlapping on small screens.

SBisson mentioned this in rEGRE3c49530a720d: Homepage: UI fixes.Apr 29 2019, 1:23 PM

Change 507013 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.3; 2019-04-30).Apr 29 2019, 2:00 PM

@SBisson Sounds great, thx!

About smaller screens:
May I suggest to have

.growthexperiments-homepage-container {
    max-width: 1215px;
    min-width: 800px;
}

And for screens<=1024px have

.growthexperiments-homepage-group-main {
    width: 100%;
}
.growthexperiments-homepage-container {
    flex-direction: column;
}
.growthexperiments-homepage-group-sidebar .growthexperiments-homepage-module {
    margin-left: 0;
}

So that we support up to 1024px resolution by having the modules in their "normal" size.

How would we deal with the viewport for <1024px screens until the mobile styling is released?

Change 507086 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Move the help module to the bottom on small screens

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

SBisson mentioned this in rEGRE515215171a86: Move the help module to the bottom on small screens.Apr 29 2019, 5:38 PM

SBisson mentioned this in rEGREc273ccad3c1c: Move the help module to the bottom on small screens.

SBisson mentioned this in rEGRE4b1cdd2eb44b: Move the help module to the bottom on small screens.Apr 29 2019, 6:03 PM

SBisson mentioned this in rEGRE32774aa7d47a: Move the help module to the bottom on small screens.Apr 29 2019, 6:24 PM

SBisson mentioned this in rEGRE114225fddbb7: Move the help module to the bottom on small screens.Apr 29 2019, 8:34 PM

Change 507086 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Move the help module to the bottom on small screens

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

SBisson moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 30 2019, 1:16 PM