Fix: Response area container heights

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

@@ -5,11 +5,11 @@ import { RESIZE_SUCCESS } from '../redux-constants';
 const initialState: IDimensions = {
   request: {
     width: '100%',
-    height: '38%'
+    height: '38vh'
   },
   response: {
     width: '100%',
-    height: '50%'
+    height: '50vh'
   },
   sidebar: {
     width: '26%',

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -16,20 +16,25 @@ import { classNames } from '../../classnames';
 import { Monaco } from '../../common';
 import { trackedGenericCopy } from '../../common/copy';
 import { CopyButton } from '../../common/copy/CopyButton';
+import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
 import { queryResponseStyles } from './../queryResponse.styles';
 
 const AdaptiveCard = (props: any) => {
   let adaptiveCard: AdaptiveCardsAPI.AdaptiveCard | null = new AdaptiveCardsAPI.AdaptiveCard();
   const dispatch: AppDispatch = useDispatch();
 
   const { body, hostConfig } = props;
-  const { sampleQuery, queryRunnerStatus: queryStatus, adaptiveCard: card, theme } = useAppSelector((state) => state);
+  const {dimensions: { response }, responseAreaExpanded,
+    sampleQuery, queryRunnerStatus: queryStatus, adaptiveCard: card, theme } = useAppSelector((state) => state);
   const { data, pending } = card;
 
   const classes = classNames(props);
   const currentTheme: ITheme = getTheme();
   const textStyle = queryResponseStyles(currentTheme).queryResponseText.root as IStyle;
 
+  const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
+  const height = convertVhToPx(responseHeight, 220);
+
   useEffect(() => {
     dispatch(getAdaptiveCard(body, sampleQuery));
 
@@ -182,7 +187,7 @@ const AdaptiveCard = (props: any) => {
               <Monaco
                 language='json'
                 body={data.template}
-                height={'800px'}
+                height={height}
               />
             </div>
           </PivotItem>

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx

@@ -9,14 +9,17 @@ import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
 import { queryResponseStyles } from '../queryResponse.styles';
 import { useAppSelector } from '../../../../store';
+import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
 
 const GraphToolkit = () => {
-  const { sampleQuery } = useAppSelector((state) => state);
+  const { sampleQuery, dimensions: {response },responseAreaExpanded } = useAppSelector((state) => state);
   const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
 
   const currentTheme: ITheme = getTheme();
   const textStyle = queryResponseStyles(currentTheme).queryResponseText.root as IStyle;
   const linkStyle = queryResponseStyles(currentTheme).link as IStyle;
+
+  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 155);
 
   if (toolkitUrl && exampleUrl) {
     return (
@@ -35,7 +38,7 @@ const GraphToolkit = () => {
           </Link>
           .
         </MessageBar>
-        <iframe width='100%' height='400px' src={toolkitUrl} title={translateMessage('Graph toolkit')} />
+        <iframe width='100%' height={height} src={toolkitUrl} title={translateMessage('Graph toolkit')} />
       </>
     );
   }

src/app/views/query-response/headers/ResponseHeaders.tsx

@@ -12,7 +12,7 @@ const ResponseHeaders = () => {
     useAppSelector((state) => state);
   const { headers } = graphResponse;
 
-  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
+  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 135);
 
   const handleCopy = async () => trackedGenericCopy(JSON.stringify(headers), RESPONSE_HEADERS_COPY_BUTTON, sampleQuery)
 

src/app/views/query-response/queryResponse.styles.ts

@@ -1,6 +1,13 @@
 import { ITheme } from '@fluentui/react';
+import { useAppSelector } from '../../../store';
+import { convertVhToPx, getResponseHeight } from '../common/dimensions/dimensions-adjustment';
 
 export const queryResponseStyles = (theme: ITheme) => {
+  const { dimensions: { response }, responseAreaExpanded} =
+    useAppSelector((state) => state);
+
+  const height = convertVhToPx(getResponseHeight( response.height, responseAreaExpanded), 175);
+
   return {
     dot: {
       height: '8px',
@@ -21,7 +28,7 @@ export const queryResponseStyles = (theme: ITheme) => {
       color: `${theme.palette.blueMid} !important`
     },
     card: {
-      height: '450px',
+      height,
       overflowY: 'auto'
     },
     copyIcon: {

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

@@ -13,7 +13,7 @@ const Response = () => {
   const { body, headers } = graphResponse;
   const dispatch: AppDispatch = useDispatch();
 
-  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
+  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 135);
 
   const contentDownloadUrl = body?.contentDownloadUrl;
   const throwsCorsError = body?.throwsCorsError;

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -60,7 +60,7 @@ function Snippet(props: ISnippetProps) {
   const snippet = (!loadingState && data) ? data[language] : null;
 
   const responseHeight = getResponseHeight(response.height, responseAreaExpanded);
-  const height = convertVhToPx(responseHeight, 140);
+  const height = convertVhToPx(responseHeight, 240);
 
   const dispatch: AppDispatch = useDispatch();