fix: Fix chart resizing when using split view (#12362)

* Fix chart resizing when using split view

* Fix z-index issues

superset-frontend/src/explore/components/DataTablesPane.tsx

@@ -55,13 +55,8 @@ const TableControlsWrapper = styled.div`
 
 const SouthPane = styled.div`
   position: relative;
-`;
-
-const SouthPaneBackground = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  background: ${({ theme }) => theme.colors.grayscale.light5};
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+  z-index: 5;
 `;
 
 const TabsWrapper = styled.div<{ contentHeight: number }>`
@@ -78,12 +73,10 @@ export const DataTablesPane = ({
   queryFormData,
   tableSectionHeight,
   onCollapseChange,
-  displayBackground,
 }: {
   queryFormData: Record<string, any>;
   tableSectionHeight: number;
   onCollapseChange: (openPanelName: string) => void;
-  displayBackground: boolean;
 }) => {
   const [data, setData] = useState<{
     [RESULT_TYPES.results]?: Record<string, any>[];
@@ -229,7 +222,6 @@ export const DataTablesPane = ({
 
   return (
     <SouthPane>
-      {displayBackground && <SouthPaneBackground />}
       <TabsWrapper contentHeight={tableSectionHeight}>
         <Collapse
           accordion

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -118,9 +118,6 @@ const ExploreChartPanel = props => {
   const [tableSectionHeight, setTableSectionHeight] = useState(
     calcSectionHeight(INITIAL_SIZES[1]),
   );
-  const [displaySouthPaneBackground, setDisplaySouthPaneBackground] = useState(
-    false,
-  );
 
   useEffect(() => {
     const calcHeaderSize = debounce(() => {
@@ -137,13 +134,9 @@ const ExploreChartPanel = props => {
     setTableSectionHeight(calcSectionHeight(southPercent));
   };
 
-  const onDragStart = () => {
-    setDisplaySouthPaneBackground(true);
-  };
-
   const onDragEnd = sizes => {
+    setSplitSizes(sizes);
     recalcPanelSizes(sizes);
-    setDisplaySouthPaneBackground(false);
   };
 
   const onCollapseChange = openPanelName => {
@@ -245,7 +238,6 @@ const ExploreChartPanel = props => {
           minSize={MIN_SIZES}
           direction="vertical"
           gutterSize={gutterHeight}
-          onDragStart={onDragStart}
           onDragEnd={onDragEnd}
           elementStyle={elementStyle}
         >
@@ -254,7 +246,6 @@ const ExploreChartPanel = props => {
             queryFormData={props.chart.latestQueryFormData}
             tableSectionHeight={tableSectionHeight}
             onCollapseChange={onCollapseChange}
-            displayBackground={displaySouthPaneBackground}
           />
         </Split>
       )}