Remove extra padding for cart sidebar to fix visual regression bug

[alexflorisca]

When upgrading the cart, there was an extra left and right margin added to the Cart page sidebar. I'm not sure if this was intentional, however it causes a visual regression bug with the points and rewards plugin where the input box and the button don't line up properly (see issue for screenshots).

This fixes #5152

Testing

How to test the changes in this Pull Request:

1. Install WooCommerce Points and Rewards, go to WooCommerce > Points and Rewards and add points to your user.
2. Go to WooCommerce > Points and Rewards > Settings and enable "Allow partial redemption"
3. Go to Cart and see the input to redeem points is showing
4. The text input should be inline with the "Apply Discount" button

Changelog

Fixed a visual bug (#5152) with the points and rewards plugin

[github-actions]

Size Change: -49 B (0%)

Total Size: 1.04 MB

Filename	Size	Change
build/wc-blocks-style-rtl.css	21.1 kB	-25 B (0%)
build/wc-blocks-style.css	21 kB	-24 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.23 kB
build/active-filters.js	7.09 kB
build/all-products-frontend.js	22.1 kB
build/all-products.js	32.9 kB
build/all-reviews.js	8.3 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.48 kB
build/atomic-block-components/add-to-cart-frontend.js	6.87 kB
build/atomic-block-components/add-to-cart.js	6.44 kB
build/atomic-block-components/button-frontend.js	1.48 kB
build/atomic-block-components/button.js	851 B
build/atomic-block-components/category-list-frontend.js	457 B
build/atomic-block-components/category-list.js	456 B
build/atomic-block-components/image-frontend.js	1.38 kB
build/atomic-block-components/image.js	1.05 kB
build/atomic-block-components/price-frontend.js	1.75 kB
build/atomic-block-components/price.js	1.71 kB
build/atomic-block-components/rating-frontend.js	553 B
build/atomic-block-components/rating.js	554 B
build/atomic-block-components/sale-badge-frontend.js	626 B
build/atomic-block-components/sale-badge.js	623 B
build/atomic-block-components/sku-frontend.js	385 B
build/atomic-block-components/sku.js	386 B
build/atomic-block-components/stock-indicator-frontend.js	584 B
build/atomic-block-components/stock-indicator.js	584 B
build/atomic-block-components/summary-frontend.js	874 B
build/atomic-block-components/summary.js	875 B
build/atomic-block-components/tag-list-frontend.js	458 B
build/atomic-block-components/tag-list.js	458 B
build/atomic-block-components/title-frontend.js	1.11 kB
build/atomic-block-components/title.js	1.11 kB
build/attribute-filter-frontend.js	16.3 kB
build/attribute-filter.js	10.8 kB
build/blocks-checkout.js	20.8 kB
build/cart-blocks/accepted-payment-methods-frontend.js	1.14 kB
build/cart-blocks/checkout-button-frontend.js	1.14 kB
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/express-payment-frontend.js	4.82 kB
build/cart-blocks/filled-cart-frontend.js	768 B
build/cart-blocks/items-frontend.js	298 B
build/cart-blocks/line-items-frontend.js	5.13 kB
build/cart-blocks/order-summary-frontend.js	8.95 kB
build/cart-blocks/totals-frontend.js	320 B
build/cart-frontend.js	48.9 kB
build/cart.js	44.5 kB
build/checkout-blocks/actions-frontend.js	1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.33 kB
build/checkout-blocks/billing-address-frontend.js	889 B
build/checkout-blocks/contact-information-frontend.js	2.94 kB
build/checkout-blocks/express-payment-frontend.js	5.11 kB
build/checkout-blocks/fields-frontend.js	343 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-frontend.js	11.4 kB
build/checkout-blocks/payment-frontend.js	7.5 kB
build/checkout-blocks/shipping-address-frontend.js	976 B
build/checkout-blocks/shipping-methods-frontend.js	4.89 kB
build/checkout-blocks/terms-frontend.js	1.22 kB
build/checkout-blocks/totals-frontend.js	322 B
build/checkout-frontend.js	51 kB
build/checkout.js	47.5 kB
build/featured-category.js	6.66 kB
build/featured-product.js	8.01 kB
build/handpicked-products.js	5.37 kB
build/legacy-template.js	2.05 kB
build/mini-cart-component-frontend.js	40.6 kB
build/mini-cart-contents.js	1.81 kB
build/mini-cart-frontend.js	1.74 kB
build/mini-cart.js	5.95 kB
build/price-filter-frontend.js	12.1 kB
build/price-filter.js	8.61 kB
build/price-format.js	1.19 kB
build/product-best-sellers.js	5.57 kB
build/product-categories.js	2.91 kB
build/product-category.js	6.44 kB
build/product-new.js	5.73 kB
build/product-on-sale.js	6.11 kB
build/product-search.js	2.47 kB
build/product-tag.js	5.81 kB
build/product-top-rated.js	5.7 kB
build/products-by-attribute.js	6.62 kB
build/reviews-by-category.js	9.94 kB
build/reviews-by-product.js	11 kB
build/reviews-frontend.js	7.21 kB
build/single-product-frontend.js	25.5 kB
build/single-product.js	8.51 kB
build/stock-filter-frontend.js	6.51 kB
build/stock-filter.js	6.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js	16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js	4.45 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js	5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js	3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js	5.02 kB
build/wc-blocks-data.js	8.84 kB
build/wc-blocks-editor-style-rtl.css	15.8 kB
build/wc-blocks-editor-style.css	15.8 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	949 B
build/wc-blocks-registry.js	2.69 kB
build/wc-blocks-shared-context.js	1.51 kB
build/wc-blocks-shared-hocs.js	1.14 kB
build/wc-blocks-vendors-style-rtl.css	1.37 kB
build/wc-blocks-vendors-style.css	1.37 kB
build/wc-blocks-vendors.js	255 kB
build/wc-blocks.js	2.95 kB
build/wc-payment-method-bacs.js	820 B
build/wc-payment-method-cheque.js	816 B
build/wc-payment-method-cod.js	912 B
build/wc-payment-method-paypal.js	838 B
build/wc-payment-method-stripe.js	11.1 kB
build/wc-settings.js	2.58 kB

_{compressed-size-action}

[senadir]

Took me a bit of hunting, but I limited that change to this PR #4974 so we need to make sure it won't regress it as well.

[senadir]

I tested this and failed to see what's trying to fix. A before and after screenshot would help.

[alexflorisca]

Hi @senadir, thought I'd reply here for posterity and with some more useful details following our slack convo. Feel free to ping me on slack in that thread in response!

Screenshots of the bug can be seen here.

This happens mainly when the cart page has a sidebar.

So it looks like when the cart block sidebar is a certain width (236px), the browser decides there isn't enough real estate and it drops the "Apply Discount" button on the second line. The styles that control the input/button come from the Woocommerce Points And Rewards plugin so we have not control over making the button smaller for example.

My initial approach was to remove the extra margin added in the PR you mentioned. I realise this causes changes to the design and may not be the best solution

As an alternative, we could reduce the margin to 8px each side, or set a min-width of 236px on the sidebar and that would make sure those buttons are on the same line.

However this seems a bit arbitrary to me and i'm aware that we are trying to fix the layout for a third party plugin at a specific width. It's difficult to test the impact this might have on other plugins that add content to the sidebar and there will likely always be a case of misalignment if we change the width of the sidebar.

I guess reverting the extra 16px margin would ensure any third party plugins that were designed before that PR was merged would still display correctly. Otherwise if we want to keep the current design with the extra margin, we could reach out to the developers of the Woocommerce points and rewards plugin, point out the issue and get them to update their plugin.

I'm looking for a bit of guidance here as I'm not sure what the best approach is.

[opr]

LGTM! :)