Keep scroll at the bottom when new output is appended (#149)

This works by using flex-direction: column-reverse so the browser will
treat the div as being reverted and will keep the scroll at the bottom
instead of top. The extra div is necessary so the content doesn't have
to be written inverted

Author: eldano

lib/elixir_console_web/live/console_live.html.heex

@@ -1,9 +1,13 @@
 <div class="flex h-full flex-col sm:flex-row">
-  <div class="flex-1 sm:h-full overflow-scroll">
+  <div class="flex-1 sm:h-full">
     <div class="h-full flex flex-col">
       <div class="flex-1"></div>
-      <%= live_component(HistoryComponent, output: @output, id: :history) %>
-      <%= live_component(CommandInputComponent, history: @history, bindings: @sandbox.bindings, id: :command_input) %>
+      <div class="flex flex-col-reverse overflow-auto">
+        <div>
+          <%= live_component(HistoryComponent, output: @output, id: :history) %>
+          <%= live_component(CommandInputComponent, history: @history, bindings: @sandbox.bindings, id: :command_input) %>
+        </div>
+      </div>
     </div>
   </div>
   <%= live_component(SidebarComponent,