From 3a3a6536b7ed9044ffaead2fbe0d8a944431925d Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 8 Apr 2026 08:33:20 -0300
Subject: [PATCH] fix(explore): Unnecessary scroll bars appearing on charts in
 Explore (#39160)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Đỗ Trọng Hải <41283691+hainenber@users.noreply.github.com>
---
 .../src/explore/components/ExploreChartPanel/index.tsx       | 5 +----
 .../ExploreChartPanel/useResizeDetectorByObserver.ts         | 5 +++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
index 82aee5bdcb5..d7393a0f99e 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/index.tsx
+++ b/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>
     );
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts b/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts
index 04ae6c1a2f4..908fec4c4dc 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts
+++ b/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,
   };