Onboarding / Recommendations: Full Width Banner

[sdixon194]

The banner has a max width, which means that on larger resolutions, it doesn’t go all the way, like the rest of the UI

Additional context

p8oabR-Co-BT-p2#comment-5000

[jeherve]

@robertf4 Do you think you could take a look at this?

Thanks!

[robertf4]

@jeffgolenski it seems that the max-width CSS needs some more tweaking, what are your thoughts?

[jeffgolenski]

@jeherve @robertf4 - This was intentional to keep it limited to a max width so the content is easily legible. The attached screenshot above is a very large screen, and the banner would need a lot of specific breakpoints added to it to accommodate scaling to a screen that large or even larger.

We don't have any data on how many folks will have a viewport this large, but I've constrained it to serve a vast audience as it exists now. Happy to explore making it work for larger screens though, if we can.

———

I personally think that after a certain width, the elements in wp-admin shouldn't scale anymore, since they become very difficult to read or use. wp-admin dashboard is a unique example, because the screen can get really wide, but the widgets themselves don't scale to extreme lengths like a lot of other wp-admin parts:

In this example the WordPress welcome scales to meet the width of the viewport, but it doesn't solve any problems by doing that...

———

Potential solution:

Maybe a more prudent concept would be to center the banner for extremely large screens. This way there's no needless scaling for the sake of matching the rest of wp-admin, yet it can be more balanced within the viewport.

Perhaps it's just me, but this doesn't really look too great...

(I'd love some added thoughts from @Automattic/jetpack-design)

Also, thanks for reporting this @sdixon194!

[scottsweb]

Agree that we should keep it constrained. When WP Admin stretches on large screens, there is no real benefit to the extra screen real estate. Just makes things harder to read.

The centered solution @jeffgolenski proposes above would get my vote.

[keoshi]

Same, no point in making it stretch for layout sake alone, and we'd be causing more problems anyhow.

Another vote for centering the Assistant!

[Luchadores]

Center it is +1

[jeffgolenski]

Thanks team. @robertf4 Can we center the banner when the breakpoint is above 1688px? I've a media query in the scss already set up for it.

[pyronaur]

I run up against the same issue on my widescreen. But my vote goes to full-width. Neither option looks amazing on a super-wide browser screen, but the centered approach introduces more misalignment.

The full-width approach isn't perfect, but because there's nothing we can do about the width of the screen when the screen is this wide - it's up to the user to resize the window if they want to reduce the width.

With a centered approach, we're only half dealing with the width by limiting the width and introducing visual inconsistency on a page that doesn't have anything else centered.

[pyronaur]

An alternative idea: