Bugzilla

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 because both buttons fit on a single line, as shown in the bottom 2/3 of the screenshot.  The actual "real" experience looks similarly broken if you zoom out, too (and it gets clipped partly-due-to-this-styling if you zoom in, per 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?

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 (and it gets clipped partly-due-to-this-styling if you zoom in, per 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?

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?