Fix: request and response height (#1201)

microsoftgraph · Nov 9, 2021 · c7b01e9 · c7b01e9
1 parent 25a3080
commit c7b01e9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 22 deletions.
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -30,29 +30,16 @@ const QueryResponse = (props: IQueryResponseProps) => {
   const [showModal, setShowModal] = useState(false);
   const [query, setQuery] = useState('');
   const [responseHeight, setResponseHeight] = useState('610px');
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const { dimensions, sampleQuery } = useSelector((state: IRootState) => state);
 
-  let isTabletSize: boolean = (windowWidth <= 1320) ? true : false;
 
   const {
     intl: { messages }
   }: any = props;
 
   useEffect(() => {
     setResponseHeight(convertVhToPx(dimensions.response.height, 50));
-    window.addEventListener('resize', handleWindowResize, false);
-    return () => window.removeEventListener('resize', handleWindowResize);
-  }, [dimensions, windowWidth]);
-
-  const handleWindowResize = () => {
-    const currentWindowWidth = window.innerWidth;
-    isTabletSize = false;
-    if (currentWindowWidth <= 1320) {
-      isTabletSize = true;
-    }
-    setWindowWidth(currentWindowWidth);
-  }
+  }, [dimensions]);
 
   const toggleShareQueryDialogState = () => {
     setShareQuaryDialogStatus(!showShareQueryDialog);
@@ -133,12 +120,12 @@ const QueryResponse = (props: IQueryResponseProps) => {
         }}
       >
         <div className='query-response' style={{
-          minHeight: responseHeight,
+          minHeight: 350,
           height: responseHeight
         }}>
 
           <Pivot overflowBehavior="menu" onLinkClick={handlePivotItemClick}
-            className={isTabletSize ? '' : 'pivot-response'} >
+            className={'pivot-response'} >
             {getPivotItems()}
             <PivotItem
               headerText='Share'

diff --git a/src/app/views/query-response/query-response.scss b/src/app/views/query-response/query-response.scss
@@ -12,13 +12,19 @@
     width: 100%;
   }
 
-  .pivot-response *[data-content='Expand xx'] {
-    float: right !important;
-    }
 
-  .pivot-response *[data-content='Share xx'] {
-    float: right !important;
+   @media screen and (min-width: 1320px){
+     .pivot-response *[data-content='Expand xx'] {
+       float: right !important;
+      }
+  }
+
+
+  @media screen and (min-width: 1320px){
+    .pivot-response *[data-content='Share xx'] {
+      float: right !important;
     }
+  }
 
   .default-text {
     display: flex;

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -138,7 +138,7 @@ export class Request extends Component<IRequestComponent, any> {
   public render() {
     const { dimensions } = this.props;
     const requestPivotItems = this.getPivotItems(dimensions.request.height);
-    const minHeight = 60;
+    const minHeight = 260;
     const maxHeight = 800;
     return (
       <Resizable