adjusting automatiom side panel

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

@@ -1,20 +1,38 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Button, Layout } from "@budibase/bbui"
+  import { Modal, Button, Layout, Icon } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
 
   export let modal
   export let webhookModal
 </script>
 
-<Panel title="Automations" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button cta on:click={modal.show}>Add automation</Button>
-  </Layout>
+<Panel title="Automations" borderRight noHeaderBorder titleCSS={false}>
+  <span class="panel-title-content" slot="panel-title-content">
+    <div class="header">
+      <div>Automations</div>
+      <div on:click={modal.show} class="spacing">
+        <Icon name="Add" />
+      </div>
+    </div>
+  </span>
   <AutomationList />
 </Panel>
 
 <Modal bind:this={modal}>
   <CreateAutomationModal {webhookModal} />
 </Modal>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
+
+  .spacing {
+    margin-left: 130px;
+  }
+</style>

packages/builder/src/components/design/Panel.svelte

@@ -14,7 +14,8 @@
   export let wide = false
   export let extraWide = false
   export let closeButtonIcon = "Close"
-
+  export let noHeaderBorder = false
+  export let titleCSS = true
   $: customHeaderContent = $$slots["panel-header-content"]
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
@@ -26,14 +27,14 @@
   class:borderLeft
   class:borderRight
 >
-  <div class="header" class:custom={customHeaderContent}>
+  <div class="header" class:noHeaderBorder class:custom={customHeaderContent}>
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
     {#if icon}
       <Icon name={icon} />
     {/if}
-    <div class="title">
+    <div class:title={titleCSS}>
       {#if customTitleContent}
         <slot name="panel-title-content" />
       {:else}
@@ -97,6 +98,10 @@
     border-bottom: var(--border-light);
     gap: var(--spacing-m);
   }
+
+  .noHeaderBorder {
+    border-bottom: none !important;
+  }
   .title {
     flex: 1 1 auto;
     width: 0;