From 8e79cfa3eae6b346796f0ef3522a5c7eed1d88d7 Mon Sep 17 00:00:00 2001
From: Nathan Silveira <nsschneider1@gmail.com>
Date: Mon, 29 Jan 2024 16:09:06 -0300
Subject: [PATCH] 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
---
 .../changelog/fix-calypso-adminmenu           |  4 +++
 packages/js/admin-layout/src/hooks/index.ts   |  1 +
 .../src/hooks/use-admin-sidebar-width.ts      | 27 +++++++++++++++++++
 packages/js/admin-layout/src/index.ts         |  1 +
 .../changelog/fix-calypso-adminmenu           |  4 +++
 .../src/components/header/header.tsx          | 18 +++++++++++--
 6 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 packages/js/admin-layout/changelog/fix-calypso-adminmenu
 create mode 100644 packages/js/admin-layout/src/hooks/index.ts
 create mode 100644 packages/js/admin-layout/src/hooks/use-admin-sidebar-width.ts
 create mode 100644 packages/js/product-editor/changelog/fix-calypso-adminmenu

diff --git a/packages/js/admin-layout/changelog/fix-calypso-adminmenu b/packages/js/admin-layout/changelog/fix-calypso-adminmenu
new file mode 100644
index 00000000000..4b870d2d1dc
--- /dev/null
+++ b/packages/js/admin-layout/changelog/fix-calypso-adminmenu
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add useAdminSidebarWidth hook
diff --git a/packages/js/admin-layout/src/hooks/index.ts b/packages/js/admin-layout/src/hooks/index.ts
new file mode 100644
index 00000000000..5ba097ade5f
--- /dev/null
+++ b/packages/js/admin-layout/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-admin-sidebar-width';
diff --git a/packages/js/admin-layout/src/hooks/use-admin-sidebar-width.ts b/packages/js/admin-layout/src/hooks/use-admin-sidebar-width.ts
new file mode 100644
index 00000000000..6d802e9330e
--- /dev/null
+++ b/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;
+}
diff --git a/packages/js/admin-layout/src/index.ts b/packages/js/admin-layout/src/index.ts
index 229f9f80b3e..5cea0dd5952 100644
--- a/packages/js/admin-layout/src/index.ts
+++ b/packages/js/admin-layout/src/index.ts
@@ -1,2 +1,3 @@
 export * from './plugins';
 export * from './components';
+export * from './hooks';
diff --git a/packages/js/product-editor/changelog/fix-calypso-adminmenu b/packages/js/product-editor/changelog/fix-calypso-adminmenu
new file mode 100644
index 00000000000..ea0900ee754
--- /dev/null
+++ b/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)
diff --git a/packages/js/product-editor/src/components/header/header.tsx b/packages/js/product-editor/src/components/header/header.tsx
index 388069262fd..0d861a056fb 100644
--- a/packages/js/product-editor/src/components/header/header.tsx
+++ b/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;
 	}