From 6e0ddcf84839eecb19c694f66460ffb8aa5453dd Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Fri, 22 Jul 2022 09:39:13 -0300
Subject: [PATCH] fix: [explore][mixed time series chart] when user change size
 of view query window, query B part will disappear (#20750)

---
 .../src/explore/components/controls/ViewQuery.tsx   |  4 +++-
 .../explore/components/controls/ViewQueryModal.tsx  | 13 ++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/ViewQuery.tsx b/superset-frontend/src/explore/components/controls/ViewQuery.tsx
index 5c0613195c2..a8ebd975d33 100644
--- a/superset-frontend/src/explore/components/controls/ViewQuery.tsx
+++ b/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 => {
diff --git a/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx b/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx
index 6a1a36fa392..023c1e35513 100644
--- a/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx
+++ b/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>
   );
 };