From 92248a11e66efe9cdea69a76894ff03f2cf7648a Mon Sep 17 00:00:00 2001
From: MG <t-mgitonga@microsoft.com>
Date: Thu, 18 Aug 2022 08:43:51 +0300
Subject: [PATCH 1/2] resize query response area

---
 src/app/views/App.tsx                         | 15 ++++++++----
 .../views/query-response/QueryResponse.tsx    | 24 ++++++++++++-------
 .../query-runner/request/body/RequestBody.tsx |  4 +---
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index 40076b7bb..3ac2a8fe7 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -369,7 +369,6 @@ class App extends Component<IAppProps, IAppState> {
     let sideWidth = sidebar.width;
     let maxWidth = '50%';
     let contentWidth = content.width;
-    const contentHeight = content.height;
 
     const query = createShareLink(sampleQuery, authenticated);
     const { mobileScreen, showSidebar } = sidebarProperties;
@@ -453,15 +452,21 @@ class App extends Component<IAppProps, IAppState> {
                 }}
                 size={{
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
-                  height: contentHeight
+                  height: ''
+                }}
+                style={!sidebarProperties.showSidebar && !mobileScreen ? {
+                  marginLeft: '8px', display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+                } : {
+                  display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? { marginLeft: '8px', flex: 1 } : {flex: 1}}
               >
-                <div style={{ marginBottom: 8}} >
+                <div style={{ marginBottom: 2}} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
                 </div>
 
-                <div>
+                <div style={{
+                  display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+                }}>
                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index 705138a51..c63973cbd 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -1,10 +1,10 @@
 import {
   Announced, Dialog, DialogFooter, DialogType,
   DefaultButton, FontSizes, IconButton,
-  Modal, Pivot, PivotItem, ITheme, getTheme
+  Modal, Pivot, PivotItem, getTheme, ITheme
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, CSSProperties } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
@@ -43,6 +43,13 @@ const QueryResponse = (props: IQueryResponseProps) => {
     intl: { messages }
   }: any = props;
 
+  const flexQueryElement: CSSProperties = {
+    display:'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    flex: 1,
+    marginTop: -13
+  }
   const toggleShareQueryDialogState = () => {
     setShareQuaryDialogStatus(!showShareQueryDialog);
   };
@@ -98,14 +105,14 @@ const QueryResponse = (props: IQueryResponseProps) => {
   }
 
   return (
-    <>
+    <div style={flexQueryElement} >
       <Resizable
         style={{
-          marginBottom: 10,
-          marginTop: 10
+          marginBottom: 20,
+          marginTop: 10,
+          flex: 1
         }}
         bounds={'window'}
-        maxHeight={810}
         minHeight={350}
         size={{
           height: responseHeight,
@@ -117,7 +124,8 @@ const QueryResponse = (props: IQueryResponseProps) => {
       >
         <div className='query-response' style={{
           minHeight: 350,
-          height: '100%'
+          height: '100%',
+          flex: 1
         }}
         onScroll={onScroll}>
 
@@ -200,7 +208,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
           />
         </DialogFooter>
       </Dialog>
-    </>
+    </div>
   );
 };
 
diff --git a/src/app/views/query-runner/request/body/RequestBody.tsx b/src/app/views/query-runner/request/body/RequestBody.tsx
index e03aa1931..1a37fef27 100644
--- a/src/app/views/query-runner/request/body/RequestBody.tsx
+++ b/src/app/views/query-runner/request/body/RequestBody.tsx
@@ -4,16 +4,14 @@ import { useSelector } from 'react-redux';
 
 import { IRootState } from '../../../../../types/root';
 import { Monaco } from '../../../common';
-import { convertVhToPx } from '../../../common/dimensions/dimensions-adjustment';
 
 const RequestBody = ({ handleOnEditorChange }: any) => {
-  const { dimensions: { request: { height } }, sampleQuery } = useSelector((state: IRootState) => state);
+  const { sampleQuery } = useSelector((state: IRootState) => state);
 
   return (
     <FocusZone>
       <Monaco
         body={sampleQuery.sampleBody}
-        height={convertVhToPx(height, 60)}
         onChange={(value) => handleOnEditorChange(value)} />
     </FocusZone>
 

From d95c10a256adc6be4468d904825945eb2d4b75c3 Mon Sep 17 00:00:00 2001
From: MG <t-mgitonga@microsoft.com>
Date: Thu, 18 Aug 2022 11:29:55 +0300
Subject: [PATCH 2/2] Add height on request body

---
 src/app/views/query-runner/request/body/RequestBody.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/views/query-runner/request/body/RequestBody.tsx b/src/app/views/query-runner/request/body/RequestBody.tsx
index 1a37fef27..e03aa1931 100644
--- a/src/app/views/query-runner/request/body/RequestBody.tsx
+++ b/src/app/views/query-runner/request/body/RequestBody.tsx
@@ -4,14 +4,16 @@ import { useSelector } from 'react-redux';
 
 import { IRootState } from '../../../../../types/root';
 import { Monaco } from '../../../common';
+import { convertVhToPx } from '../../../common/dimensions/dimensions-adjustment';
 
 const RequestBody = ({ handleOnEditorChange }: any) => {
-  const { sampleQuery } = useSelector((state: IRootState) => state);
+  const { dimensions: { request: { height } }, sampleQuery } = useSelector((state: IRootState) => state);
 
   return (
     <FocusZone>
       <Monaco
         body={sampleQuery.sampleBody}
+        height={convertVhToPx(height, 60)}
         onChange={(value) => handleOnEditorChange(value)} />
     </FocusZone>