Revert "DevTools / Terminal UI fixes (codesandbox#2105)"

This reverts commit ab9026c.

Author: CompuIves

.circleci/config.yml

@@ -6,21 +6,21 @@ version: 2.1
 
 aliases:
   - &restore_repo_cache
-    key: v19-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_repo_cache
-    key: v19-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ~/codesandbox-client
 
   - &restore_deps_cache
     keys:
-      - v19-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v19-dependency-cache-{{ .Branch }}
-      - v19-dependency-cache
+      - v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v18-dependency-cache-{{ .Branch }}
+      - v18-dependency-cache
 
   - &save_deps_cache
-    key: v19-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -39,29 +39,29 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v19-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v19-standalone-dependency-cache-{{ .Branch }}
-      - v19-standalone-dependency-cache
+      - v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+      - v18-standalone-dependency-cache-{{ .Branch }}
+      - v18-standalone-dependency-cache
 
   - &save_standalone_deps_cache
-    key: v19-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+    key: v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_build_cache
-    key: v19-prod-app-build-cache-master
+    key: v18-prod-app-build-cache-master
 
   - &restore_prod_cache
-    key: v19-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_prod_app_cache
-    key: v19-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v18-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/app/www
       - ./packages/homepage/.cache
 
   - &save_prod_cache
-    key: v19-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
 

packages/app/src/app/components/Preview/DevTools/Terminal/Shell/index.js

@@ -162,7 +162,7 @@ class Shell extends React.PureComponent<Props> {
   }
 
   render() {
-    const { hidden } = this.props;
+    const { height, hidden } = this.props;
 
     return (
       <div
@@ -172,6 +172,7 @@ class Shell extends React.PureComponent<Props> {
           bottom: 0,
           left: 0,
           right: 0,
+          height: height - 72,
           padding: '.5rem',
           visibility: hidden ? 'hidden' : 'visible',
         }}

packages/app/src/app/components/Preview/DevTools/Terminal/ShellTabs/elements.js

@@ -6,12 +6,12 @@ export const Container = styled.div`
   background-color: ${props =>
     props.theme['editorGroupHeader.tabsBackground'] || props.theme.background4};
 
+  width: 100%;
   align-items: center;
   font-size: 0.875rem;
 
   color: ${props =>
     props.theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.7)'};
-  flex: none;
 `;
 
 export const CrossIcon = styled(CrossIconClean)`

packages/app/src/app/components/Preview/DevTools/Terminal/index.js

@@ -177,10 +177,7 @@ class TerminalComponent extends React.Component<Props, State> {
     const { height, hidden } = this.props;
 
     return (
-      <div
-        className={hidden ? undefined : 'terminal'}
-        ref={this.setupResizeObserver}
-      >
+      <div className={!hidden && 'terminal'} ref={this.setupResizeObserver}>
         {!hidden && this.state.shells.length > 0 && (
           <ShellTabs
             selectedShell={this.state.selectedShell}
@@ -190,14 +187,15 @@ class TerminalComponent extends React.Component<Props, State> {
           />
         )}
 
-        <div style={{ position: 'relative', flex: 'auto' }}>
+        <div style={{ position: 'relative' }}>
           <div
             style={{
               position: 'absolute',
               top: 0,
               bottom: 0,
               left: 0,
               right: 0,
+              height: height - 72,
               padding: '1rem',
               visibility:
                 hidden || this.state.selectedShell !== null

packages/app/src/app/components/Preview/DevTools/Terminal/styles.css

@@ -160,7 +160,6 @@
 }
 
 .terminal {
-  flex: auto;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }

packages/app/src/app/components/Preview/DevTools/elements.ts

@@ -4,6 +4,9 @@ export const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%;
+
+  max-height: 100%;
   z-index: 7;
 `;
 
@@ -38,6 +41,9 @@ export const ContentContainer = styled.div`
     props.theme['panel.background'] ||
     props.theme['editor.background'] ||
     props.theme.background4};
-  flex: auto;
-  display: flex;
+  position: relative;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
 `;

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

@@ -422,10 +422,17 @@ export default class DevTools extends React.PureComponent<Props, State> {
           this.normalizeHeight(el);
         }}
         style={{
-          flex: primary
-            ? '1 1 0'
-            : `0 0 ${height}${typeof height === 'number' ? 'px' : ''}`,
-          minHeight: primary ? 0 : 'auto',
+          height: primary ? '100%' : 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 && (