ref(cmdk) fix panel container

Author: JonasBa

static/app/utils/useDimensions.tsx

@@ -10,7 +10,7 @@ interface Props<Element extends HTMLElement> {
  * Returns a ref to be added to an element and returns the dimensions of that element
  */
 export function useDimensions<Element extends HTMLElement>({elementRef}: Props<Element>) {
-  const [dimensions, setDimensions] = useState({height: 0, width: 0});
+  const [dimensions, setDimensions] = useState({height: 0, width: 0, top: 0, left: 0});
 
   const element = elementRef.current;
 
@@ -19,13 +19,17 @@ export function useDimensions<Element extends HTMLElement>({elementRef}: Props<E
     setDimensions({
       height: element?.clientHeight || 0,
       width: element?.clientWidth || 0,
+      top: element?.offsetTop || 0,
+      left: element?.offsetLeft || 0,
     });
   }, [element]);
 
   const onResize = useCallback(() => {
     setDimensions({
       height: element?.clientHeight || 0,
       width: element?.clientWidth || 0,
+      top: element?.offsetTop || 0,
+      left: element?.offsetLeft || 0,
     });
   }, [element]);
 

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

@@ -92,6 +92,7 @@ export function WidgetBuilderV2({
   );
 
   const navigationElementRef = useRef<HTMLDivElement>(null);
+  const mainContentElementRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (navigationElementRef.current) return;
@@ -104,7 +105,17 @@ export function WidgetBuilderV2({
     }
   }, []);
 
+  useEffect(() => {
+    if (mainContentElementRef.current) return;
+
+    const mainContentElement = document.querySelector('main');
+    if (mainContentElement) {
+      mainContentElementRef.current = mainContentElement as HTMLDivElement;
+    }
+  }, []);
+
   const dimensions = useDimensions({elementRef: navigationElementRef});
+  const mainContentDimensions = useDimensions({elementRef: mainContentElementRef});
 
   const handleDragEnd = ({over}: any) => {
     setTranslate(snapPreviewToCorners(over));
@@ -168,12 +179,12 @@ export function WidgetBuilderV2({
                     ? isMediumScreen
                       ? {
                           left: 0,
-                          top: `${dimensions.height ?? 0}px`,
+                          top: `${mainContentDimensions.top ?? 0}px`,
                           willChange: 'top',
                         }
                       : {
                           left: `${dimensions.width ?? 0}px`,
-                          top: 0,
+                          top: `${mainContentDimensions.top ?? 0}px`,
                           willChange: 'left',
                         }
                     : undefined