fix height and add null state

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

@@ -1,6 +1,6 @@
 <script>
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, notifications } from "@budibase/bbui"
+  import { Modal, notifications, Layout } from "@budibase/bbui"
   import NavHeader from "components/common/NavHeader.svelte"
   import { onMount } from "svelte"
   import {
@@ -53,16 +53,24 @@
     />
   </div>
   <div class="side-bar-nav">
-    {#each filteredAutomations as automation}
-      <NavItem
-        text={automation.name}
-        selected={automation._id === selectedAutomationId}
-        on:click={() => selectAutomation(automation._id)}
-        selectedBy={$userSelectedResourceMap[automation._id]}
-      >
-        <EditAutomationPopover {automation} />
-      </NavItem>
-    {/each}
+    {#if filteredAutomations.length}
+      {#each filteredAutomations as automation}
+        <NavItem
+          text={automation.name}
+          selected={automation._id === selectedAutomationId}
+          on:click={() => selectAutomation(automation._id)}
+          selectedBy={$userSelectedResourceMap[automation._id]}
+        >
+          <EditAutomationPopover {automation} />
+        </NavItem>
+      {/each}
+    {:else}
+      <Layout paddingY="none" paddingX="L">
+        <div class="no-results">
+          There aren't any automations matching that name
+        </div>
+      </Layout>
+    {/if}
   </div>
 </div>
 
@@ -88,7 +96,6 @@
   }
 
   .side-bar-controls {
-    flex: 0 0 60px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -96,13 +103,13 @@
     gap: var(--spacing-l);
     padding: 0 var(--spacing-l);
   }
-  .side-bar-controls :global(.spectrum-Icon) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-
   .side-bar-nav {
     flex: 1 1 auto;
     overflow: auto;
     overflow-x: hidden;
   }
+
+  .no-results {
+    color: var(--spectrum-global-color-gray-600);
+  }
 </style>