Page MenuHomePhabricator

GettingStarted toolbar can overflow if window is less than 1000px wide
Closed, ResolvedPublic

Description

display in Firefox in a 900px-wide window

GettingStarted's task toolbar can overflow and look weird if your window isn't wide enough. See attached screenshot, note buttons and close boxes appearing outside the dark background. It happened to me half-HD screen window (960px wide), but that's because I zoom fonts; At 100% the overflow happens at around 905px in Firefox.

The appearance glitches are similar in Chrome.

Changing mw-gettingstarted-toolbar to "display: table" greatly improves the appearance at narrow widths in Firefox but causes other problems in Chromium.


Version: master
Severity: minor

Attached:

Details

Reference
bz48562

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:42 AM
bzimport set Reference to bz48562.

It's complicated by the way the page is being shifted for the toolbar, but this can probably be improved with media queries. We just need to choose an alternative layout (probably requiring more toolbar height) for small-width screens like this.

CCing the designers.

swalling wrote:

Yes, since the beginning of this (i.e. the prototyping and testing) we knew that anything smaller than 1024x768 would get a slightly broken-looking toolbar.

For the purposes of the test, the number of desktop users who regularly use windows with a width of less than 1000 is small enough not pervert the test results, but when we move to productize this, this should be fixed. FWIW: in Chrome on OSX, I can get down to 910px without overflow.

I could use some help from the designers in crafting alternative CSS and appearance. If they just tell me (e.g. "use this alternative CSS for under 950px width", I can implement that pretty easily.

swalling wrote:

(In reply to comment #1)

It's complicated by the way the page is being shifted for the toolbar, but
this
can probably be improved with media queries. We just need to choose an
alternative layout (probably requiring more toolbar height) for small-width
screens like this.

CCing the designers.

Okay, this issue has lingered enough. If Pau and May are comfortable, I'd like to rectify this sooner rather than later, and simply hide the toolbar at small sizes. Say, anything under 900 width?

Until we come up with a smarter responsive design (say, hiding the center elements in the toolbar and reducing it to the "Back to list" and "Try another article" elements?), we can prevent broken views of the toolbar.

Out of curiosity, I retested this on in the iPad simulator (which gets redirected to desktop Vector, not MobileFrontEnd) and the toolbar works just fine.

I'm on this now. I'm first working on expanding the toolbar height, so it's usable at a smaller resolution. If that doesn't work, I can just hide it.

Related URL: https://gerrit.wikimedia.org/r/69282 (Gerrit Change I44a472e97e99f4107a964f64422e7892533d194b)

Okay, this isn't perfect, but it significantly improves matters.

swalling wrote:

(In reply to comment #7)

Okay, this isn't perfect, but it significantly improves matters.

Yep, this works fairly well down to about 850px wide. I'd still ideally like to hide the toolbar below that size, but I think this patch works.

Done and on Piramido for testing.

Do we want to log that for Analytics purposes (whether they saw the toolbar)?

Merged and deployed.