Sort automation steps by name

packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte

@@ -1,11 +1,14 @@
 <script>
+  import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
   import AutomationBlock from "./AutomationBlock.svelte"
   import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
 
   let selectedTab = "TRIGGER"
   let buttonProps = []
-  $: blocks = Object.entries($automationStore.blockDefinitions[selectedTab])
+  $: blocks = sortBy(entry => entry[1].name)(
+    Object.entries($automationStore.blockDefinitions[selectedTab])
+  )
 
   $: {
     if ($automationStore.selectedAutomation.hasTrigger()) {
@@ -37,3 +40,9 @@
     {/each}
   </div>
 </section>
+
+<style>
+  #blocklist {
+    margin-top: var(--spacing-xl);
+  }
+</style>