fix(devtools): Fix terminal output when it's positioned along with the browser (codesandbox#2040)

Author: arthurdenner

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 ? 'terminal' : undefined}
+        ref={this.setupResizeObserver}
+      >
         {!hidden && this.state.shells.length > 0 && (
           <ShellTabs
             selectedShell={this.state.selectedShell}
@@ -187,7 +190,7 @@ class TerminalComponent extends React.Component<Props, State> {
           />
         )}
 
-        <div style={{ position: 'relative' }}>
+        <div style={{ flex: 1, position: 'relative' }}>
           <div
             style={{
               position: 'absolute',

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

@@ -162,4 +162,5 @@
 .terminal {
   height: 100%;
   width: 100%;
+  display: flex;
 }