kie-issues#1679 : If the bottom of the overlay panel is close to edit…

…or bottom, it adds a vertical overflow after toggling an option (apache#2845)

Co-authored-by: chinnamatli kusumalatha <[email protected]>

packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx

@@ -43,17 +43,18 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
   const overlayPanelContainer = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
     if (overlayPanelContainer.current && availableHeight) {
-      const bounds = overlayPanelContainer.current.getBoundingClientRect();
-      const currentHeight = bounds.height;
-      const yPos = bounds.y;
-      if (currentHeight + yPos >= availableHeight) {
+      if (overlayPanelContainer.current.scrollHeight <= availableHeight) {
+        overlayPanelContainer.current.style.overflowY = "hidden";
+        overlayPanelContainer.current.style.height = "auto";
+      } else if (
+        overlayPanelContainer.current.style.height !== availableHeight - BOTTOM_MARGIN + "px" &&
+        overlayPanelContainer.current.style.height !== "auto"
+      ) {
         overlayPanelContainer.current.style.height = availableHeight - BOTTOM_MARGIN + "px";
-        overlayPanelContainer.current.style.overflowY = "scroll";
-      } else {
-        overlayPanelContainer.current.style.overflowY = "visible";
+        overlayPanelContainer.current.style.overflowY = "auto";
       }
     }
-  });
+  }, [availableHeight]);
 
   return (
     <div ref={overlayPanelContainer}>