From 46f80e87c2ad02c84562095b16be6bb909ebfa8c Mon Sep 17 00:00:00 2001
From: AhmarZaidi <ahmarzaidi07@gmail.com>
Date: Mon, 16 Sep 2024 13:34:02 +0530
Subject: [PATCH 1/2] Fix vertical toolbar placement issue in zoom out mode

- Watch target element for mutation
- Add mutation observer
---
 packages/components/src/popover/index.tsx | 43 ++++++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 3005f13c952ec0..3b4df8d7af532d 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -287,11 +287,44 @@ const UnforwardedPopover = (
 				? undefined
 				: normalizedPlacementFromProps,
 		middleware,
-		whileElementsMounted: ( referenceParam, floatingParam, updateParam ) =>
-			autoUpdate( referenceParam, floatingParam, updateParam, {
-				layoutShift: false,
-				animationFrame: true,
-			} ),
+		whileElementsMounted: (
+			referenceParam,
+			floatingParam,
+			updateParam
+		) => {
+			const cleanupAutoUpdate = autoUpdate(
+				referenceParam,
+				floatingParam,
+				updateParam,
+				{
+					layoutShift: false,
+					animationFrame: true,
+				}
+			);
+
+			const targetElement = document.querySelector(
+				'.interface-interface-skeleton__body'
+			);
+
+			if ( targetElement ) {
+				const mutationObserver = new MutationObserver( () => {
+					updateParam();
+				} );
+
+				mutationObserver.observe( targetElement, {
+					childList: true,
+					subtree: true,
+					attributes: true,
+				} );
+
+				return () => {
+					cleanupAutoUpdate();
+					mutationObserver.disconnect();
+				};
+			}
+
+			return cleanupAutoUpdate;
+		},
 	} );
 
 	const arrowCallbackRef = useCallback(

From 398081d500fd7187668090ea73e06eb6c8bfc423 Mon Sep 17 00:00:00 2001
From: AhmarZaidi <ahmarzaidi07@gmail.com>
Date: Mon, 16 Sep 2024 13:39:01 +0530
Subject: [PATCH 2/2] Add documentation for custom mutation observer

---
 packages/components/src/popover/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 3b4df8d7af532d..83092342d625d1 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -302,6 +302,7 @@ const UnforwardedPopover = (
 				}
 			);
 
+			// Observe mutations on the parent div of the inserter to update toolbar position.
 			const targetElement = document.querySelector(
 				'.interface-interface-skeleton__body'
 			);