Fix: Makes app height responsive on all browsers

src/app/services/reducers/dimensions-reducers.ts

@@ -13,11 +13,11 @@ const initialState: IDimensions = {
   },
   sidebar: {
     width: '26%',
-    height: ''
+    height: '100%'
   },
   content: {
     width: '74%',
-    height: ''
+    height: '100%'
   }
 };
 

src/app/views/App.styles.ts

@@ -11,7 +11,8 @@ export const appStyles = (theme: ITheme) => {
       paddingRight: '15px',
       paddingLeft: '4px',
       marginLeft: 'auto',
-      marginRight: 'auto'
+      marginRight: 'auto',
+      borderBottom: '1px solid black'
     },
     appRow: {
       display: 'flex',
@@ -67,7 +68,7 @@ export const appStyles = (theme: ITheme) => {
     statusAreaMobileScreen: {
       marginTop: 5
     },
-    statusAreaLaptopScreen: {
+    statusAreaFullScreen: {
       marginTop: 0
     },
     vResizeHandle: {
@@ -85,6 +86,17 @@ export const appStyles = (theme: ITheme) => {
       position: 'absolute',
       top: '13px',
       right: '10px'
+    },
+    mainContent: {
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column' as 'column'
+    },
+    queryResponse: {
+      display: 'flex',
+      flexDirection: 'column' as 'column',
+      height: '100%',
+      overflow: 'hidden'
     }
   };
 };

src/app/views/App.tsx

@@ -71,7 +71,9 @@ class App extends Component<IAppProps, IAppState> {
   private mediaQueryList = window.matchMedia('(max-width: 992px)');
   private currentTheme: ITheme = getTheme();
   private statusAreaMobileStyle = appStyles(this.currentTheme).statusAreaMobileScreen;
-  private statusAreaLaptopStyle = appStyles(this.currentTheme).statusAreaLaptopScreen;
+  private statusAreaFullScreenStyle = appStyles(this.currentTheme).statusAreaFullScreen;
+  private contentStyle = appStyles(this.currentTheme).mainContent;
+  private queryResponseStyle = appStyles(this.currentTheme).queryResponse;
 
   constructor(props: IAppProps) {
     super(props);
@@ -418,7 +420,8 @@ class App extends Component<IAppProps, IAppState> {
           />
           <div className={ `ms-Grid-row ${classes.appRow}`} style={{
             flexWrap: mobileScreen && 'wrap',
-            marginRight: showSidebar && '-20px' }}>
+            marginRight: showSidebar && '-20px',
+            height: mobileScreen ? '100%' : '100vh' }}>
 
             {graphExplorerMode === Mode.Complete && (
               <Resizable
@@ -468,7 +471,7 @@ class App extends Component<IAppProps, IAppState> {
 
             {displayContent && (
               <Resizable
-                bounds={'window'}
+                bounds={'parent'}
                 className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
                 enable={{
                   right: false
@@ -477,20 +480,23 @@ class App extends Component<IAppProps, IAppState> {
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: contentHeight
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : {}}
+                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px', overflow: 'hidden'}
+                  : this.contentStyle }
               >
-                <div style={{ marginBottom: 8 }}>
+                <div style={{ marginBottom: 8 }} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
-                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
+                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <TermsOfUseMessage />
                   </div>
                 </div>
 
-                <div>
-                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
+                <div style={this.queryResponseStyle}>
+                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>
-                  <QueryResponse verb={this.state.selectedVerb} />
+                  <div style={{ display:'flex', flexGrow:'1', flexShrink: '1'}}>
+                    <QueryResponse verb={this.state.selectedVerb} />
+                  </div>
                 </div>
               </Resizable>
             )}

src/app/views/common/monaco/monaco.scss

@@ -5,6 +5,7 @@
   margin-top: 5px;
   padding-bottom: $gutter;
   width: inherit !important;
+  overflow: hidden;
 
   .react-monaco-editor-container {
     width: inherit !important;

src/app/views/query-response/QueryResponse.tsx

@@ -4,7 +4,7 @@ import {
   Modal, Pivot, PivotItem, TooltipHost
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
@@ -16,7 +16,6 @@ import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { expandResponseArea } from '../../services/actions/response-expanded-action-creator';
 import { translateMessage } from '../../utils/translate-messages';
 import { copy } from '../common/copy';
-import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { IRootState } from '../../../types/root';
@@ -29,17 +28,12 @@ const QueryResponse = (props: IQueryResponseProps) => {
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const [query] = useState('');
-  const [responseHeight, setResponseHeight] = useState('610px');
-  const { dimensions, sampleQuery } = useSelector((state: IRootState) => state);
+  const { sampleQuery } = useSelector((state: IRootState) => state);
 
   const {
     intl: { messages }
   }: any = props;
 
-  useEffect(() => {
-    setResponseHeight(convertVhToPx(dimensions.response.height, 50));
-  }, [dimensions]);
-
   const toggleShareQueryDialogState = () => {
     setShareQuaryDialogStatus(!showShareQueryDialog);
   };
@@ -96,13 +90,13 @@ const QueryResponse = (props: IQueryResponseProps) => {
       <Resizable
         style={{
           marginBottom: 10,
-          marginTop: 10
+          marginTop: 10,
+          flexGrow: 1,
+          flexShrink:1
         }}
-        maxHeight={800}
-        minHeight={350}
-        bounds={'window'}
+        bounds={'parent'}
         size={{
-          height: responseHeight,
+          height: '100%',
           width: '100%'
         }}
         enable={{
@@ -111,7 +105,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
       >
         <div className='query-response' style={{
           minHeight: 350,
-          height: responseHeight
+          height: '100%'
         }}>
 
           <Pivot overflowBehavior="menu" onLinkClick={handlePivotItemClick}

src/app/views/query-runner/request/Request.tsx

@@ -16,7 +16,6 @@ import { Mode } from '../../../../types/enums';
 import { IRequestComponent } from '../../../../types/request';
 import { IRootState } from '../../../../types/root';
 import { setDimensions } from '../../../services/actions/dimensions-action-creator';
-import { ACCOUNT_TYPE } from '../../../services/graph-constants';
 import { translateMessage } from '../../../utils/translate-messages';
 import { convertPxToVh, convertVhToPx } from '../../common/dimensions/dimensions-adjustment';
 import { Auth } from './auth';
@@ -42,7 +41,6 @@ export class Request extends Component<IRequestComponent, any> {
     const {
       handleOnEditorChange,
       mode,
-      profile,
       intl: { messages }
     }: any = this.props;
 
@@ -181,7 +179,8 @@ export class Request extends Component<IRequestComponent, any> {
         <Resizable
           style={{
             border: 'solid 1px #ddd',
-            marginBottom: 10
+            marginBottom: 10,
+            overflow: 'hidden'
           }}
           onResizeStop={(e: any, direction: any, ref: any) => {
             if (ref && ref.style && ref.style.height) {