From 5fbfc0bb6b4a4214c9cdf4303ba6771599b47a3b Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 20 May 2022 14:20:53 +0100
Subject: [PATCH] fix animation of test panel

---
 .../AutomationBuilder/FlowChart/FlowItemTitle.svelte |  2 +-
 .../app/[application]/automate/_layout.svelte        | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
index 8837968482..652055d2d8 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
@@ -81,7 +81,7 @@
           onSelect(block)
         }}
       >
-        <Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
+        <Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
       </div>
     </div>
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index 8e18dd43fb..bd239fcb0f 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -5,6 +5,8 @@
   import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+  import { fly } from "svelte/transition"
+
   $: automation =
     $automationStore.selectedAutomation?.automation ||
     $automationStore.automations[0]
@@ -45,7 +47,13 @@
   </div>
 
   {#if automation?.showTestPanel}
-    <div class="setup"><TestPanel {automation} /></div>
+    <div
+      in:fly|local={{ x: 500, duration: 500 }}
+      out:fly|local={{ x: 500, duration: 500 }}
+      class="setup"
+    >
+      <TestPanel {automation} />
+    </div>
   {/if}
   <Modal bind:this={modal}>
     <CreateAutomationModal {webhookModal} />
@@ -62,6 +70,7 @@
     display: grid;
     grid-auto-flow: column dense;
     grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
+    overflow: hidden;
   }
 
   .nav {
@@ -73,6 +82,7 @@
     border-right: var(--border-light);
     background-color: var(--background);
     padding-bottom: 60px;
+    overflow: hidden;
   }
 
   .content {