Resolve add to cart modal mobile isssue

[mattcoy-arcticleaf]

What?

This change brings the add to cart modal to the proper location on mobile.

On mobile screens, the add to cart modal appears off-screen. This issue stems from an edit made to the modal.scss file where the left, top, and transform CSS properties were removed.

To replicate, go to any product on the Cornerstone demo theme, for example, the Able Brewing System, resize your window to a width under 551px, and add the product to your cart.

The edit made to the modal.scss file appears to be a fix to center the small modal. This issue can be resolved by setting margin to 0, while keeping the left, top, and transform properties. I have changed the margin to 0 to prevent breaking the small modal with this edit.

Tickets / Documentation

N/A

Screenshots

Before:

After:

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin

[junedkazi]

@mattcoy-arcticleaf the PR looks good. Can you please add a screenshot for desktop as well to confirm it is backward compatible.

[mattcoy-arcticleaf]

@junedkazi here are the screenshots you requested:

Add to cart modal on desktop:

Small modal on desktop (modal--small class):

I realize the alert modal is empty, but that was just copied from the alert-modal.html component, so it does not have content that would normally be injected when this file is called. The screenshot is just to show that the small modal is centered with the updated code.