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

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 ] );

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