Automations panel now uses the tabs component

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

@@ -1,33 +1,45 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, Tabs, Tab } from "@budibase/bbui"
   let modal
 </script>
 
 <div class="title">
-  <h1>Automations</h1>
+  <Tabs selected="Automations">
+    <Tab title="Automations">
+      <div class="tab-content-padding">
+        <AutomationList />
+        <Modal bind:this={modal}>
+          <CreateAutomationModal />
+        </Modal>
+      </div>
+    </Tab>
+  </Tabs>
   <i
     on:click={modal.show}
     data-cy="new-automation"
     class="ri-add-circle-fill" />
 </div>
-<AutomationList />
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
 
 <style>
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
+  i {
+    font-size: 20px;
+    position: absolute;
+    top: var(--spacing-l);
+    right: var(--spacing-l);
+  }
+
   .title {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
-  }
+    position: relative;
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
   }
   .title i {
     font-size: 20px;

packages/builder/src/pages/builder/[application]/automate/_layout.svelte

@@ -28,13 +28,10 @@
 
   .nav {
     overflow-y: auto;
-    background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     border-right: var(--border-light);
   }