Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648

Aljullu · 2023-05-30T09:52:36Z

Testing

User Facing Testing

Set up your browser so scrollbars are visible (that might depend on the browser/OS you use).
Add the Mini-Cart block to the header of your store.
In the frontend, open the Mini-Cart drawer and verify there is no horizontal shift of the contents.

Before	After
before	after

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible

…scrollbars are visible

github-actions · 2023-05-30T09:54:26Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9648.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-price-format`, `wp-i18n`, `wp-polyfill`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

Files with errors: 475
Total errors: 2266

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-05-30T09:58:01Z

Size Change: +27 B (0%)

Total Size: 1.09 MB

Filename	Size	Change
`build/mini-cart-component-frontend.js`	28.4 kB	+27 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.57 kB
`build/active-filters-wrapper-frontend.js`	7.62 kB
`build/active-filters.js`	7.48 kB
`build/all-products-frontend.js`	11.9 kB
`build/all-products.js`	40 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	4.05 kB
`build/attribute-filter-wrapper-frontend.js`	4.29 kB
`build/attribute-filter.js`	13.1 kB
`build/blocks-checkout.js`	35.2 kB
`build/breadcrumbs.js`	2.05 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.39 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products--product-price-frontend.js`	2.94 kB
`build/cart-blocks/cart-cross-sells-products-frontend.js`	3.71 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.17 kB
`build/cart-blocks/cart-express-payment-frontend.js`	720 B
`build/cart-blocks/cart-items-frontend.js`	301 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.5 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.27 kB
`build/cart-blocks/cart-totals-frontend.js`	308 B
`build/cart-blocks/empty-cart-frontend.js`	346 B
`build/cart-blocks/filled-cart-frontend.js`	656 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.63 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.12 kB
`build/cart-blocks/order-summary-fee-frontend.js`	272 B
`build/cart-blocks/order-summary-heading-frontend.js`	333 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17.1 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.8 kB
`build/cart.js`	45.1 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.7 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.04 kB
`build/checkout-blocks/express-payment-frontend.js`	1.14 kB
`build/checkout-blocks/fields-frontend.js`	332 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.69 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	275 B
`build/checkout-blocks/order-summary-frontend.js`	1.28 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	17 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	434 B
`build/checkout-blocks/payment-frontend.js`	8.29 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.84 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.17 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.63 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.4 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	361 B
`build/checkout-frontend.js`	31.9 kB
`build/checkout.js`	46.4 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	15 kB
`build/featured-product.js`	15.2 kB
`build/filter-wrapper-frontend.js`	14.2 kB
`build/filter-wrapper.js`	2.4 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	7.99 kB
`build/legacy-template.js`	6.37 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	1.74 kB
`build/mini-cart-contents-block/checkout-button-frontend.js`	1.74 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	360 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	267 B
`build/mini-cart-contents-block/footer-frontend.js`	4.1 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	594 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	528 B
`build/mini-cart-contents-block/title-frontend.js`	1.91 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	1.61 kB
`build/mini-cart-contents-block/title-label-frontend.js`	1.54 kB
`build/mini-cart-contents.js`	18 kB
`build/mini-cart-frontend.js`	2.67 kB
`build/mini-cart.js`	4.35 kB
`build/price-filter-wrapper-frontend.js`	6.75 kB
`build/price-filter.js`	8.47 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js`	251 B
`build/product-add-to-cart--product-button--product-image--product-rating--product-title.js`	151 B
`build/product-add-to-cart-frontend.js`	6.51 kB
`build/product-add-to-cart.js`	8.87 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	964 B
`build/product-button-frontend.js`	2.65 kB
`build/product-button.js`	4.01 kB
`build/product-categories.js`	2.37 kB
`build/product-category.js`	9.35 kB
`build/product-collection.js`	4.23 kB
`build/product-image-frontend.js`	2.63 kB
`build/product-image.js`	4.18 kB
`build/product-new.js`	8.64 kB
`build/product-on-sale.js`	8.67 kB
`build/product-price-frontend.js`	203 B
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.7 kB
`build/product-rating-frontend.js`	2.28 kB
`build/product-rating.js`	971 B
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	1.8 kB
`build/product-sale-badge.js`	666 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1.84 kB
`build/product-sku.js`	536 B
`build/product-stock-indicator-frontend.js`	2.02 kB
`build/product-stock-indicator.js`	730 B
`build/product-summary-frontend.js`	2.19 kB
`build/product-summary.js`	905 B
`build/product-tag.js`	8.97 kB
`build/product-template.js`	3.26 kB
`build/product-title-frontend.js`	2.22 kB
`build/product-title.js`	3.69 kB
`build/product-top-rated.js`	8.89 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.4 kB
`build/rating-filter-wrapper-frontend.js`	6.21 kB
`build/rating-filter.js`	6.89 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.11 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-wrapper-frontend.js`	2.98 kB
`build/stock-filter.js`	7.6 kB
`build/store-notices.js`	1.68 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.21 kB
`build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	5.11 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js`	5.26 kB
`build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js`	3.57 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.4 kB
`build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js`	8.25 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12.5 kB
`build/vendors--price-filter-wrapper-frontend.js`	2.2 kB
`build/vendors--product-add-to-cart-frontend.js`	7.26 kB
`build/vendors--rating-filter-wrapper-frontend.js`	5.1 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.96 kB
`build/wc-blocks-editor-style.css`	5.96 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.75 kB
`build/wc-blocks-style-rtl.css`	27.9 kB
`build/wc-blocks-style.css`	27.8 kB
`build/wc-blocks-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	65 kB
`build/wc-blocks.js`	3.7 kB
`build/wc-payment-method-bacs.js`	816 B
`build/wc-payment-method-cheque.js`	811 B
`build/wc-payment-method-cod.js`	909 B
`build/wc-payment-method-paypal.js`	837 B
`build/wc-settings.js`	2.6 kB
`build/wc-shipping-method-pickup-location.js`	30.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

danieldudzic · 2023-05-30T11:37:23Z

👋 @Aljullu

I've tried different browsers, but none of them have a setting for visible scrollbars. Which browser did you use to test?

Aljullu · 2023-05-30T12:31:06Z

I've tried different browsers, but none of them have a setting for visible scrollbars. Which browser did you use to test?

In GNOME (Linux) there is an option in Settings > Accessibility to disable overlay scrollbars. I don't know how it is on Mac, but I found this article which might help:

https://support.vagaro.com/hc/en-us/articles/204347160-Disable-Disappearing-Scroll-Bars-on-Mac-Computers

danieldudzic

Thanks, I was searching for the scrollbar setting in the wrong place!

LGTM

Aljullu added 2 commits May 30, 2023 11:41

Fix wrong TS name

d35b980

Prevent page horizontal shift when opening the Mini-Cart drawer when …

e017f52

…scrollbars are visible

Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels May 30, 2023

Aljullu self-assigned this May 30, 2023

woocommercebot requested review from a team and danieldudzic and removed request for a team May 30, 2023 09:52

Aljullu mentioned this pull request May 30, 2023

FSE - Mini-Cart Drawer block does not trigger the recalculation of the gallery size while it removes the scrollbar #9635

Closed

danieldudzic approved these changes May 30, 2023

View reviewed changes

github-actions bot added this to the 10.4.0 milestone May 30, 2023

github-actions bot added status: ready to merge and removed status: needs review labels May 30, 2023

Aljullu merged commit e7ec80c into trunk May 30, 2023

Aljullu deleted the fix/9635-prevent-horizontal-shift-mini-cart branch May 30, 2023 15:09

github-actions bot removed the status: ready to merge label May 30, 2023

tarunvijwani mentioned this pull request Jun 8, 2023

Update WooCommerce blocks package to 10.4.2 woocommerce/woocommerce#38656

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648

Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648

Aljullu commented May 30, 2023

github-actions bot commented May 30, 2023 •

edited

Loading

github-actions bot commented May 30, 2023

danieldudzic commented May 30, 2023

Aljullu commented May 30, 2023

danieldudzic left a comment

Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648

Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648

Conversation

Aljullu commented May 30, 2023

Testing

User Facing Testing

WooCommerce Visibility

Changelog

github-actions bot commented May 30, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented May 30, 2023

danieldudzic commented May 30, 2023

Aljullu commented May 30, 2023

danieldudzic left a comment

Choose a reason for hiding this comment

github-actions bot commented May 30, 2023 •

edited

Loading