Fix scroll to bottom

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/Console/elements.js

@@ -17,6 +17,10 @@ export const Messages = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
   white-space: pre-wrap;
+
+  > div {
+    overflow-y: auto;
+  }
 `;
 
 export const IconContainer = styled.div`

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { listen, dispatch } from 'codesandbox-api';
+import { debounce } from 'lodash';
 import update from 'immutability-helper';
 
 import ClearIcon from 'react-icons/lib/md/clear-all';
@@ -24,6 +25,12 @@ class Console extends React.Component {
 
   listener;
 
+  constructor(props) {
+    super(props);
+
+    this.scrollToBottom = debounce(this.scrollToBottom, 1 / 60);
+  }
+
   componentDidMount() {
     this.listener = listen(this.handleMessage);
   }
@@ -165,10 +172,14 @@ class Console extends React.Component {
 
   componentDidUpdate() {
     if (this.list) {
-      this.list.scrollTop = this.list.scrollHeight;
+      this.scrollToBottom();
     }
   }
 
+  scrollToBottom = () => {
+    this.list.scrollTop = this.list.scrollHeight;
+  };
+
   evaluateConsole = (command: string) => {
     this.addMessage('command', [command]);