fix(frontend): align add-node button consistently across node types (#28)

The "+" add-next button was duplicated across TriggerNode, LlmNode and
ActionNode with an arbitrary -28px offset from the card, leaving it
floating away from Vue Flow's own connection handle at the card's edge
instead of being coordinated with it. Consolidate the button into a
shared NodeAddButton component and anchor it the same way Vue Flow
anchors its handle (right: 0; translate(50%, -50%)) so both sit at the
same point, consistently, regardless of a node's border-radius or
width.

Adds a Playwright regression test asserting the button's vertical
centering and its offset from the card's right edge stay consistent
across trigger/llm/action node types.

Signed-off-by: Lukas Hirt <info@hirt.cz>
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

Author: LukasHirt

frontend/src/components/nodes/ActionNode.vue

@@ -14,21 +14,15 @@
       <span class="workflows-node-card-subtitle">{{ subtitle }}</span>
     </div>
     <Handle type="source" :position="Position.Right" />
-    <button
-      type="button"
-      class="workflows-node-add-button"
-      :aria-label="$gettext('Add next step')"
-      @click.stop="$emit('add-next')"
-    >
-      +
-    </button>
+    <NodeAddButton @add-next="$emit('add-next')" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { useGettext } from 'vue3-gettext'
+import NodeAddButton from './NodeAddButton.vue'
 import { findNodeTypeForNode } from '../../nodeTypes'
 import type { WorkflowNodeData } from '../../types/workflow'
 

frontend/src/components/nodes/LlmNode.vue

@@ -14,21 +14,15 @@
       <span class="workflows-node-card-subtitle">{{ subtitle }}</span>
     </div>
     <Handle type="source" :position="Position.Right" />
-    <button
-      type="button"
-      class="workflows-node-add-button"
-      :aria-label="$gettext('Add next step')"
-      @click.stop="$emit('add-next')"
-    >
-      +
-    </button>
+    <NodeAddButton @add-next="$emit('add-next')" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { useGettext } from 'vue3-gettext'
+import NodeAddButton from './NodeAddButton.vue'
 import type { WorkflowNodeData } from '../../types/workflow'
 
 const props = defineProps<{ id: string; data: WorkflowNodeData }>()

frontend/src/components/nodes/NodeAddButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button
+    type="button"
+    class="workflows-node-add-button"
+    :aria-label="$gettext('Add next step')"
+    @click.stop="$emit('add-next')"
+  >
+    +
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useGettext } from 'vue3-gettext'
+
+defineEmits<{ (e: 'add-next'): void }>()
+const { $gettext } = useGettext()
+</script>

frontend/src/components/nodes/TriggerNode.vue

@@ -13,21 +13,15 @@
       <span class="workflows-node-card-subtitle">{{ subtitle }}</span>
     </div>
     <Handle type="source" :position="Position.Right" />
-    <button
-      type="button"
-      class="workflows-node-add-button"
-      :aria-label="$gettext('Add next step')"
-      @click.stop="$emit('add-next')"
-    >
-      +
-    </button>
+    <NodeAddButton @add-next="$emit('add-next')" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { useGettext } from 'vue3-gettext'
+import NodeAddButton from './NodeAddButton.vue'
 import { findNodeTypeForNode } from '../../nodeTypes'
 import type { WorkflowNodeData } from '../../types/workflow'
 

frontend/src/styles/canvas.css

@@ -37,13 +37,28 @@
   text-overflow: ellipsis;
   max-width: 180px;
 }
+/*
+ * Anchored the same way Vue Flow anchors its own connection handle
+ * (.vue-flow__handle-right: right: 0; top: 50%; transform: translate(50%, -50%)) so the
+ * "+" button straddles the card's right edge at exactly the same point as the handle,
+ * regardless of a node's border-radius (e.g. the trigger's pill-shaped left corners
+ * don't affect the right edge, but anchoring to the handle's own point rather than an
+ * arbitrary fixed offset keeps the two coordinated even if that ever changes) or width.
+ * It paints after the Handle in the DOM, so it visually sits on top of the small handle
+ * dot instead of floating a fixed 28px away from it, giving one clear affordance instead
+ * of two dis-connected circles.
+ */
 .workflows-node-add-button {
   position: absolute;
-  right: -28px;
+  right: 0;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translate(50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 22px;
   height: 22px;
+  padding: 0;
   border-radius: 50%;
   border: 1px solid var(--oc-color-border, #ccc);
   background: var(--oc-color-swatch-brand-contrastText, #fff);

frontend/tests/e2e/add-node-button-alignment.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test'
+import { login } from './support/auth'
+
+test('the "+" add-next button aligns consistently across node types', async ({ page }) => {
+  await login(page)
+
+  await page.goto('/workflows/workflows')
+  await page.getByRole('button', { name: 'Add workflow' }).click()
+  await page.waitForURL(/\/workflows\/workflows\/new$/)
+
+  // Chain a trigger -> LLM -> action, matching build-workflow.spec.ts, so we get one
+  // instance of each of the three node components that render the shared add-button.
+  await page.getByRole('button', { name: 'Add trigger' }).click()
+  await page.getByRole('button', { name: 'Manual Trigger', exact: true }).click()
+  await expect(page.locator('.workflows-node-trigger')).toBeVisible()
+
+  await page.locator('.workflows-node-trigger .workflows-node-add-button').click()
+  await page.getByRole('button', { name: 'LLM Prompt', exact: true }).click()
+  await expect(page.locator('.workflows-node-llm')).toBeVisible()
+
+  await page.locator('.workflows-node-llm .workflows-node-add-button').click()
+  await page.getByRole('button', { name: 'Add Tag', exact: true }).click()
+  await expect(page.locator('.workflows-node-action')).toBeVisible()
+
+  const centerOffsets: number[] = []
+
+  for (const cardClass of ['workflows-node-trigger', 'workflows-node-llm', 'workflows-node-action']) {
+    const card = page.locator(`.${cardClass}`)
+    const cardBox = await card.boundingBox()
+    const buttonBox = await card.locator('.workflows-node-add-button').boundingBox()
+    expect(cardBox, `${cardClass} card should have a bounding box`).not.toBeNull()
+    expect(buttonBox, `${cardClass} add-button should have a bounding box`).not.toBeNull()
+    if (!cardBox || !buttonBox) continue
+
+    // The button must be vertically centered on its own card, regardless of the
+    // card's height or its border-radius shape (e.g. the trigger's pill-shaped left
+    // corners must not throw off the button sitting on the right edge).
+    const cardCenterY = cardBox.y + cardBox.height / 2
+    const buttonCenterY = buttonBox.y + buttonBox.height / 2
+    expect(
+      Math.abs(buttonCenterY - cardCenterY),
+      `${cardClass} add-button should be vertically centered on the card`
+    ).toBeLessThanOrEqual(1)
+
+    // The button must sit essentially at the card's right edge -- coordinated with Vue
+    // Flow's own connection handle there -- rather than floating away from the card
+    // with a visible, disconnected-looking gap.
+    const buttonCenterX = buttonBox.x + buttonBox.width / 2
+    const cardRightX = cardBox.x + cardBox.width
+    const offsetFromEdge = buttonCenterX - cardRightX
+    expect(
+      Math.abs(offsetFromEdge),
+      `${cardClass} add-button should sit right at the card's edge, not floating away from it`
+    ).toBeLessThanOrEqual(6)
+
+    centerOffsets.push(offsetFromEdge)
+  }
+
+  // And that offset must be identical (within a tight tolerance) across all three node
+  // types, so the button can't silently drift out of sync between the three node
+  // components again.
+  const [first, ...rest] = centerOffsets
+  for (const offset of rest) {
+    expect(Math.abs(offset - first)).toBeLessThanOrEqual(1)
+  }
+})