fixing issues from latest merge

- handle religned to prevent card from growing
- spacing improved with modal cards
- automations closed by default
- background and border added to header to improve structure

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -221,7 +221,7 @@
 <style>
   .item-body {
     display: flex;
-    margin-left: var(--spacing-m);
+    margin-left: var(--spacing-xs);
     gap: var(--spacing-m);
     align-items: center;
   }

packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte

@@ -34,7 +34,7 @@
 
   let drawer
   let condition
-  let open = true
+  let open = false
   let confirmDeleteModal
 
   $: branch = step.inputs?.branches?.[branchIdx]
@@ -220,7 +220,7 @@
     display: inline-block;
   }
   .block {
-    width: 360px;
+    width: 380px;
     font-size: 16px;
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -221,6 +221,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background-color: var(--background);
+    border-bottom: var(--border-light);
     padding-left: var(--spacing-l);
     transition: background 130ms ease-out;
     flex: 0 0 60px;

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -39,8 +39,8 @@
   const contentPos = getContext("contentPos")
 
   let webhookModal
-  let open = true
-  let showLooping = false
+  let open = false
+  let showLooping = true
   let role
   let blockEle
   let positionStyles
@@ -387,7 +387,6 @@
   .block {
     width: 360px;
     font-size: 16px;
-    border-radius: 4px;
   }
   .block .wrap {
     width: 100%;
@@ -398,20 +397,27 @@
     flex-direction: row;
   }
   .block.draggable .wrap .handle {
-    height: auto;
+    position: absolute;
+    top: -0.5px;
+    left: -14px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--grey-3);
-    padding: 6px;
+    padding: 0 4px;
+    height: 100%;
     color: var(--grey-6);
     cursor: grab;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
   }
   .block.draggable .wrap .handle.grabbing {
     cursor: grabbing;
   }
   .block.draggable .wrap .handle :global(.drag-handle) {
     width: 6px;
+    margin-left: 1px;
+    padding-top: 4px;
   }
   .block .wrap .block-content {
     width: 100%;
@@ -421,6 +427,10 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 12px;
   }
+  .block-content:has(.handle) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
   .blockSection {
     padding: var(--spacing-xl);
   }

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

@@ -91,7 +91,7 @@
 <style>
   .item-body {
     display: flex;
-    margin-left: var(--spacing-m);
+    margin-left: var(--spacing-xs);
     gap: var(--spacing-m);
     align-items: center;
   }