Fix: Empty Mini Cart contents overflow issue (https://github.com/woocommerce/woocommerce-blocks/pull/5635)

* fix: add wrapper for empty mini cart contents inner blocks. Allow inner content to be scrollable

* fix overflow issue for the editor

* add padding for the empty cart view

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss

@@ -41,4 +41,16 @@
 		box-shadow: inset 0 0 0 1px;
 		color: inherit;
 	}
+
+	.wp-block-woocommerce-empty-mini-cart-contents-block {
+		overflow-y: unset;
+		padding: 0;
+
+		> .block-editor-inner-blocks {
+			max-height: 100vh;
+			overflow-y: auto;
+			box-sizing: border-box;
+			padding: $gap-largest $gap $gap;
+		}
+	}
 }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/block.tsx

@@ -1,5 +0,0 @@
-const Block = ( { children }: { children: JSX.Element } ): JSX.Element => {
-	return <>{ children }</>;
-};
-
-export default Block;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx

@@ -20,7 +20,11 @@ const EmptyMiniCartContentsBlock = ( {
 		return null;
 	}
 
-	return <>{ children }</>;
+	return (
+		<div className="wp-block-woocommerce-empty-mini-cart-contents-block">
+			{ children }
+		</div>
+	);
 };
 
 export default EmptyMiniCartContentsBlock;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss

@@ -65,6 +65,7 @@
 
 		button {
 			color: inherit;
+			z-index: 9999;
 		}
 
 		svg {
@@ -84,6 +85,11 @@
 	justify-content: center;
 }
 
+.wp-block-woocommerce-empty-mini-cart-contents-block {
+	overflow-y: auto;
+	padding: $gap-largest $gap $gap;
+}
+
 h2.wc-block-mini-cart__title {
 	@include font-size(larger);
 	margin: $gap-largest $gap 0;