Set max size on drag resize handlers (#1691)

* Fix issue #1654

* Ensure terminal takes precedence over preview while dragging

* Flex does not try to shrink terminal anymore

* Conditionally set flexShrink to console based on devToolIndex

Author: samrith-s

packages/app/src/app/components/Preview/DevTools/index.tsx

@@ -219,9 +219,8 @@ export default class DevTools extends React.PureComponent<Props, State> {
     });
   };
 
-  getCurrentPane = () => {
-    return this.props.viewConfig.views[this.state.currentPaneIndex];
-  };
+  getCurrentPane = () =>
+    this.props.viewConfig.views[this.state.currentPaneIndex];
 
   updateStatus = (id: string) => (
     status: 'success' | 'warning' | 'error' | 'info' | 'clear',
@@ -397,9 +396,7 @@ export default class DevTools extends React.PureComponent<Props, State> {
     });
   };
 
-  getViews = (): IViews => {
-    return this.allViews;
-  };
+  getViews = (): IViews => this.allViews;
 
   node: HTMLElement;
   allViews: IViews;
@@ -425,9 +422,16 @@ export default class DevTools extends React.PureComponent<Props, State> {
         }}
         style={{
           height: primary ? '100%' : height,
-          minHeight: height,
           position: 'relative',
           display: 'flex',
+          maxHeight: '100%',
+          /**
+           * Necessary to ensure it drags naturally. Otherwise there's an issue
+           * where flex tries to allocate equal space to the preview and the terminal,
+           * resulting in a very jaggy experience. We set flex-shrink to 0 only
+           * for the console, and not for the preview
+           */
+          flexShrink: devToolIndex === 1 ? 0 : 1,
         }}
       >
         {!hideTabs && (