DevTools / Terminal UI fixes (codesandbox#2105)

* DevTools / Terminal UI fixes.

* Bump CircleCI cache keys version.

* CSS fixes.

Author: lbogdan

.circleci/config.yml

@@ -6,21 +6,21 @@ version: 2.1
 
 aliases:
   - &restore_repo_cache
-    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v19-repo-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_repo_cache
-    key: v18-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v19-repo-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ~/codesandbox-client
 
   - &restore_deps_cache
     keys:
-      - v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v18-dependency-cache-{{ .Branch }}
-      - v18-dependency-cache
+      - v19-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v19-dependency-cache-{{ .Branch }}
+      - v19-dependency-cache
 
   - &save_deps_cache
-    key: v18-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v19-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -39,29 +39,29 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v18-standalone-dependency-cache-{{ .Branch }}
-      - v18-standalone-dependency-cache
+      - v19-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+      - v19-standalone-dependency-cache-{{ .Branch }}
+      - v19-standalone-dependency-cache
 
   - &save_standalone_deps_cache
-    key: v18-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+    key: v19-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_build_cache
-    key: v18-prod-app-build-cache-master
+    key: v19-prod-app-build-cache-master
 
   - &restore_prod_cache
-    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v19-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_prod_app_cache
-    key: v18-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v19-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/app/www
       - ./packages/homepage/.cache
 
   - &save_prod_cache
-    key: v18-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v19-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 { height, hidden } = this.props;
+    const { hidden } = this.props;
 
     return (
       <div
@@ -172,7 +172,6 @@ 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,7 +177,10 @@ class TerminalComponent extends React.Component<Props, State> {
     const { height, hidden } = this.props;
 
     return (
-      <div className={!hidden && 'terminal'} ref={this.setupResizeObserver}>
+      <div
+        className={hidden ? undefined : 'terminal'}
+        ref={this.setupResizeObserver}
+      >
         {!hidden && this.state.shells.length > 0 && (
           <ShellTabs
             selectedShell={this.state.selectedShell}
@@ -187,15 +190,14 @@ class TerminalComponent extends React.Component<Props, State> {
           />
         )}
 
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: 'relative', flex: 'auto' }}>
           <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,6 +160,7 @@
 }
 
 .terminal {
-  height: 100%;
-  width: 100%;
+  flex: auto;
+  display: flex;
+  flex-direction: column;
 }

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

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

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

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