From e7ec80cd7c190ffc70672e36256ad81682f8a398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Tue, 30 May 2023 17:09:11 +0200
Subject: [PATCH] Prevent horizontal shift when opening the Mini-Cart drawer if
 scrollbars are visible (#9648)

* Fix wrong TS name

* Prevent page horizontal shift when opening the Mini-Cart drawer when scrollbars are visible
---
 assets/js/blocks/mini-cart/block.tsx                 | 12 ++++++++++--
 .../mini-cart-products-table-block/block.tsx         |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
index 6d0539d8976..fc19a1f2f6e 100644
--- a/assets/js/blocks/mini-cart/block.tsx
+++ b/assets/js/blocks/mini-cart/block.tsx
@@ -51,6 +51,10 @@ interface Props {
 	hasHiddenPrice: boolean;
 }
 
+function getScrollbarWidth() {
+	return window.innerWidth - document.documentElement.clientWidth;
+}
+
 const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 	const {
 		isInitiallyOpen = false,
@@ -91,10 +95,14 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 	useEffect( () => {
 		const body = document.querySelector( 'body' );
 		if ( body ) {
+			const scrollBarWidth = getScrollbarWidth();
 			if ( isOpen ) {
-				Object.assign( body.style, { overflow: 'hidden' } );
+				Object.assign( body.style, {
+					overflow: 'hidden',
+					paddingRight: scrollBarWidth + 'px',
+				} );
 			} else {
-				Object.assign( body.style, { overflow: '' } );
+				Object.assign( body.style, { overflow: '', paddingRight: 0 } );
 			}
 		}
 	}, [ isOpen ] );
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
index 84361cb0649..3925a465b49 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -5,11 +5,13 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { CartLineItemsTable } from '@woocommerce/base-components/cart-checkout';
 import classNames from 'classnames';
 
-type MiniCartContentsBlockProps = {
+type MiniCartProductsTableBlockProps = {
 	className: string;
 };
 
-const Block = ( { className }: MiniCartContentsBlockProps ): JSX.Element => {
+const Block = ( {
+	className,
+}: MiniCartProductsTableBlockProps ): JSX.Element => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	return (
 		<div