fix(explore): Unnecessary scroll bars appearing on charts in Explore (#39160)

Co-authored-by: Đỗ Trọng Hải <41283691+hainenber@users.noreply.github.com>

superset-frontend/src/explore/components/ExploreChartPanel/index.tsx

@@ -204,7 +204,6 @@ const ExploreChartPanel = ({
 
   const {
     ref: chartPanelRef,
-    observerRef: resizeObserverRef,
     width: chartPanelWidth,
     height: chartPanelHeight,
   } = useResizeDetectorByObserver();
@@ -378,7 +377,6 @@ const ExploreChartPanel = ({
           flex-direction: column;
           padding-top: ${theme.sizeUnit * 2}px;
         `}
-        ref={resizeObserverRef}
       >
         {vizTypeNeedsDataset && (
           <Alert
@@ -481,7 +479,6 @@ const ExploreChartPanel = ({
       </div>
     ),
     [
-      resizeObserverRef,
       showAlertBanner,
       errorMessage,
       onQuery,
@@ -533,7 +530,7 @@ const ExploreChartPanel = ({
       document.body.className += ` ${standaloneClass}`;
     }
     return (
-      <div id="app" data-test="standalone-app" ref={resizeObserverRef}>
+      <div id="app" data-test="standalone-app">
         {standaloneChartBody}
       </div>
     );

superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts

@@ -31,15 +31,16 @@ export default function useResizeDetectorByObserver() {
       setChartPanelSize({ width, height });
     }
   }, []);
-  const { ref: observerRef } = useResizeDetector({
+  // Use targetRef to observe the same element we measure
+  useResizeDetector({
     refreshMode: 'debounce',
     refreshRate: 300,
     onResize,
+    targetRef: ref,
   });
 
   return {
     ref,
-    observerRef,
     width,
     height,
   };