From d35b980fbe216ef8e3f1e5ce20e36355304cfe06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 30 May 2023 11:41:42 +0200 Subject: [PATCH 1/2] Fix wrong TS name --- .../inner-blocks/mini-cart-products-table-block/block.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 (
Date: Tue, 30 May 2023 11:42:38 +0200 Subject: [PATCH 2/2] Prevent page horizontal shift when opening the Mini-Cart drawer when scrollbars are visible --- assets/js/blocks/mini-cart/block.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 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 ] );