1852150 - Remove `margin-inline:100px` from "Not now" button in shopping onboarding flow

Status: RESOLVED FIXED

(Firefox :: Messaging System, task, P1)

Description

[Daniel Holbert [:dholbert]]

Bug 1846763 added margin-inline: 100px to the "Not now" button in the shopping experience onboarding content, but that makes the button layout look kinda broken under various configurations (e.g. it contributes to the overflow discussed in bug 1851657 by forcing the container to be at least ~280px wide to hold the 200px of margin and 80px of button).

I'm not entirely sure what the margin-inline:100px is trying to achieve (maybe just a linebreak?) -- whatever we're going for, could we achieve it in some other way?

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing actual rendering (fine) vs. how it looks in `about:shoppingsidebar` at two different window sizes

To illustrate the issue, here's the actual default rendering (which is fine), as compared to directly viewing about:shoppingsidebar in a wide window vs. a skinnier window (still not as skinny as the actual sidebar).

When viewing about:shoppingsidebar in an actual window, the button layout looks broken/misaligned because both buttons fit on a single line (and the second one is at an arbitrary "offset-by-100px" position) as shown in the bottom 2/3 of the screenshot. The actual "real" experience looks similarly broken if you zoom out, too (or, if you zoom in, it gets clipped, partly due to this margin styling, as discussed in bug 1851657 comment 3).

So: right now the layout might look right by default, but it's kinda fragile; we should aim to have the CSS be robust here an to ensure it looks good even in the face of possible user-imposed custom font settings or custom zoom settings, or other languages when we eventually localize this content (where the button might be larger/smaller due to word length), etc.

It looks like we're aiming to get a vertical column with two centered buttons. Perhaps we should just use a flex container to achieve that, or something along those lines?

Comment 2

[Emily McMinn :emcminn]

The margin-inline:100px is in fact being used to trigger a linebreak :) This comes from the additional_button element being configurable through JSON (so we can move it around for onboarding experiments, without code changes.) I can definitely look at handling it differently for the sidebar.

Comment 3

[Daniel Holbert [:dholbert]]

Thanks!

Comment 4

[Emily McMinn :emcminn]

Attachment: Bug 1852150 - Remove margin:inline from shopping sidebar buttons

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/06bbded14f7b
Remove margin:inline from shopping sidebar buttons r=omc-reviewers,aminomancer

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/06bbded14f7b