fix: [explore][mixed time series chart] when user change size of view query window, query B part will disappear (#20750)

superset-frontend/src/explore/components/controls/ViewQuery.tsx

@@ -45,10 +45,12 @@ interface ViewQueryProps {
 
 const StyledSyntaxContainer = styled.div`
   height: 100%;
+  display: flex;
+  flex-direction: column;
 `;
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
-  height: calc(100% - 26px); // 100% - clipboard height
+  flex: 1;
 `;
 
 const ViewQuery: React.FC<ViewQueryProps> = props => {

superset-frontend/src/explore/components/controls/ViewQueryModal.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { ensureIsArray, t } from '@superset-ui/core';
+import { styled, ensureIsArray, t } from '@superset-ui/core';
 import Loading from 'src/components/Loading';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { getChartDataRequest } from 'src/components/Chart/chartAction';
@@ -32,6 +32,12 @@ type Result = {
   language: string;
 };
 
+const ViewQueryModalContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
 const ViewQueryModal: React.FC<Props> = props => {
   const [result, setResult] = useState<Result[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -71,14 +77,15 @@ const ViewQueryModal: React.FC<Props> = props => {
   if (error) {
     return <pre>{error}</pre>;
   }
+
   return (
-    <>
+    <ViewQueryModalContainer>
       {result.map(item =>
         item.query ? (
           <ViewQuery sql={item.query} language={item.language || undefined} />
         ) : null,
       )}
-    </>
+    </ViewQueryModalContainer>
   );
 };