Fix product editor UI misbehaving in Calypso (#44132)

* Fix product editor UI misbehaving in custom adminmenu widths (e.g. Calypso)

* Extract logic to useAdminSidebarWidth hook

packages/js/admin-layout/changelog/fix-calypso-adminmenu

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add useAdminSidebarWidth hook

packages/js/admin-layout/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-admin-sidebar-width';

packages/js/admin-layout/src/hooks/use-admin-sidebar-width.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * the admin menu can have different widths in certain scenarios, like when using calypso
+ * so we need to observe it and adjust the header width and position accordingly
+ */
+export function useAdminSidebarWidth() {
+	const [ width, setWidth ] = useState( 0 );
+	useEffect( () => {
+		const resizeObserver = new ResizeObserver( ( entries ) => {
+			setWidth( entries[ 0 ].contentRect.width );
+		} );
+		const adminMenu = document.getElementById( 'adminmenu' );
+		if ( adminMenu ) {
+			resizeObserver.observe( adminMenu );
+		}
+		return () => {
+			if ( adminMenu ) {
+				resizeObserver.unobserve( adminMenu );
+			}
+		};
+	}, [] );
+	return width;
+}

packages/js/admin-layout/src/index.ts

@@ -1,2 +1,3 @@
 export * from './plugins';
 export * from './components';
+export * from './hooks';

packages/js/product-editor/changelog/fix-calypso-adminmenu

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix product editor UI misbehaving in custom adminmenu widths (e.g. Calypso)

packages/js/product-editor/src/components/header/header.tsx

@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-import { WooHeaderItem } from '@woocommerce/admin-layout';
+import { WooHeaderItem, useAdminSidebarWidth } from '@woocommerce/admin-layout';
 import { useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
+import { createElement, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, Tooltip } from '@wordpress/components';
 import { chevronLeft, group, Icon } from '@wordpress/icons';
@@ -56,6 +56,20 @@ export function Header( {
 		'name'
 	);
 
+	const sidebarWidth = useAdminSidebarWidth();
+
+	useEffect( () => {
+		document
+			.querySelectorAll( '.interface-interface-skeleton__header' )
+			.forEach( ( el ) => {
+				if ( ( el as HTMLElement ).style ) {
+					( el as HTMLElement ).style.width =
+						'calc(100% - ' + sidebarWidth + 'px)';
+					( el as HTMLElement ).style.left = sidebarWidth + 'px';
+				}
+			} );
+	}, [ sidebarWidth ] );
+
 	if ( ! productId ) {
 		return null;
 	}