ref(cmdk) fix panel container (#112236)

Fixes widgetBuilder panel container by anchoring its position to the
main element

Author: JonasBa

static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx

@@ -104,6 +104,30 @@ export function WidgetBuilderV2({
     }
   }, []);
 
+  const [mainContentPosition, setMainContentPosition] = useState<{
+    left: number;
+    top: number;
+  } | null>(null);
+  useEffect(() => {
+    const mainContentElement = document.querySelector('main');
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target === mainContentElement) {
+          const rect = entry.target.getBoundingClientRect();
+          setMainContentPosition({top: rect.top, left: rect.left});
+        }
+      }
+    });
+    if (mainContentElement) {
+      observer.observe(mainContentElement);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   const dimensions = useDimensions({elementRef: navigationElementRef});
 
   const handleDragEnd = ({over}: any) => {
@@ -168,12 +192,12 @@ export function WidgetBuilderV2({
                     ? isMediumScreen
                       ? {
                           left: 0,
-                          top: `${dimensions.height ?? 0}px`,
+                          top: `${mainContentPosition?.top ?? 0}px`,
                           willChange: 'top',
                         }
                       : {
                           left: `${dimensions.width ?? 0}px`,
-                          top: 0,
+                          top: `${mainContentPosition?.top ?? 0}px`,
                           willChange: 'left',
                         }
                     : undefined