CYS: fix tooltip position (#48495)

* CYS: fix tooltip position

* Add changefile(s) from automation for the following project(s): woocommerce

* trigger CI

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx

@@ -37,6 +37,7 @@ import { useAddAutoBlockPreviewEventListenersAndObservers } from './hooks/auto-b
 import { IsResizingContext } from './resizable-frame';
 import { __ } from '@wordpress/i18n';
 import { useQuery } from '@woocommerce/navigation';
+import clsx from 'clsx';
 
 // @ts-ignore No types for this exist yet.
 const { Provider: DisabledProvider } = Disabled.Context;
@@ -178,7 +179,10 @@ function ScaledBlockPreview( {
 				) }
 			<DisabledProvider value={ true }>
 				<div
-					className="block-editor-block-preview__content"
+					className={ clsx( 'block-editor-block-preview__content', {
+						'woocommerce-customize-store-assembler':
+							! isPatternPreview,
+					} ) }
 					style={
 						autoScale
 							? {

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts

@@ -191,8 +191,6 @@ const updateSelectedBlock = (
 		} );
 
 		updatePopoverPosition( {
-			mainBodyWidth: window.document.body.clientWidth,
-			iframeWidth: body.clientWidth,
 			event,
 			hoveredBlockClientId: null,
 			clickedBlockClientId: clickedBlockClientId as string,
@@ -208,8 +206,6 @@ const updateSelectedBlock = (
 
 		if ( selectedBlockClientId ) {
 			updatePopoverPosition( {
-				mainBodyWidth: window.document.body.clientWidth,
-				iframeWidth: body.clientWidth,
 				event,
 				hoveredBlockClientId: selectedBlockClientId,
 				clickedBlockClientId: null,
@@ -272,8 +268,6 @@ type useAutoBlockPreviewEventListenersCallbacks = {
 	getBlockParents: ( clientId: string ) => string[];
 	setBlockEditingMode: ( clientId: string ) => void;
 	updatePopoverPosition: ( options: {
-		mainBodyWidth: number;
-		iframeWidth: number;
 		event: MouseEvent;
 		hoveredBlockClientId: string | null;
 		clickedBlockClientId: string | null;

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-popover-handler.ts

@@ -38,20 +38,16 @@ export const usePopoverHandler = () => {
 	);
 
 	const updatePopoverPosition = ( {
-		mainBodyWidth,
-		iframeWidth,
 		event,
 		clickedBlockClientId,
 		hoveredBlockClientId,
 	}: {
-		mainBodyWidth: number;
-		iframeWidth: number;
 		event: MouseEvent;
 		clickedBlockClientId: string | null;
 		hoveredBlockClientId: string | null;
 	} ) => {
 		const iframe = window.document.querySelector(
-			'iframe[name="editor-canvas"]'
+			'.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
 		) as HTMLElement;
 
 		clickedClientId =
@@ -72,10 +68,8 @@ export const usePopoverHandler = () => {
 
 			const newElement = {
 				getBoundingClientRect: generateGetBoundingClientRect(
-					event.clientX +
-						( mainBodyWidth - iframeWidth - iframeRect.left ) +
-						200,
-					event.clientY + iframeRect.top + 40
+					event.clientX + iframeRect.left,
+					event.clientY + iframeRect.top + 20
 				),
 			} as VirtualElement;
 

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -815,6 +815,7 @@ body.woocommerce-assembler {
 }
 
 .woocommerce-customize-store_popover-tooltip {
+	pointer-events: none;
 	.components-popover__content {
 		width: fit-content;
 		user-select: none;

plugins/woocommerce/changelog/48495-fix-cys-tooltip-position

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: fix tooltip position.  </details>  <details>  <summary>Changelog Entry Comment</summary>