Remove duplicate scrollbar & move scrollbar (#443)

* Remove duplicate scrollbar

* Move scrolling from modal-content to log-container

* Replace css autoscroll with stable js autoscroll

esphome/dashboard/static/esphome.css

@@ -46,17 +46,8 @@ i.very-large {
   font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
 }
 
-.autoscroll {
-  display: flex;
-  flex-direction: column-reverse;
-  flex-basis: auto;
-}
-
-.autoscroll div {
-  flex-basis: 100%;
-}
-
 .log {
+  max-height: calc(100% - 56px);
   background-color: #1c1c1c;
   margin-top: 0;
   margin-bottom: 0;
@@ -161,6 +152,10 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
   height: auto !important;
 }
 
+.tap-target-wrapper {
+  position: fixed !important;
+}
+
 /* https://github.com/tnhu/status-indicator/blob/master/styles.css */
 .status-indicator .status-indicator-icon {
   display: inline-block;
@@ -223,9 +218,8 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
 #editor {
   margin-top: 0;
   margin-bottom: 0;
-  padding: 16px;
   border-radius: 3px;
-  height: 100%
+  height: calc(100% - 56px);
 }
 
 .update-available i {

esphome/dashboard/static/esphome.js

@@ -168,6 +168,7 @@ const colorReplace = (pre, state, text) => {
     }
   }
   addSpan(text.substring(i));
+  scrollToBottomOfElement(pre);
 };
 
 const removeUpdateAvailable = (filename) => {
@@ -700,4 +701,15 @@ const startWizard = () => {
   });
 };
 
+const scrollToBottomOfElement = (element) => {
+  var atBottom = false;
+  if (element.scrollTop + 30 >= (element.scrollHeight - element.offsetHeight)) {
+    atBottom = true;
+  }
+
+  if (atBottom) {
+    element.scrollTop = element.scrollHeight;
+  }
+}
+
 setupWizardStart.addEventListener('click', startWizard);