diff --git a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
index d013b1d5e6..962c7d601f 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { beforeNavigate, goto, invalidate } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
   import WorkflowAddStepModal from '$lib/modals/WorkflowAddStepModal.svelte';
   import WorkflowEditStepModal from '$lib/modals/WorkflowEditStepModal.svelte';
   import WorkflowTriggerPicker from '$lib/modals/WorkflowTriggerPicker.svelte';
   import { Route } from '$lib/route';
   import { getWorkflowActions, handleUpdateWorkflow } from '$lib/services/workflow.service';
   import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto, WorkflowStepDto, WorkflowUpdateDto } from '@immich/sdk';
+  import type { WorkflowResponseDto, WorkflowUpdateDto } from '@immich/sdk';
   import {
     ActionBar,
     AppShell,
@@ -44,12 +43,10 @@
     mdiPlus,
   } from '@mdi/js';
   import { cloneDeep, isEqual } from 'lodash-es';
-  import { flushSync } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
   import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
   import WorkflowStepCard from './WorkflowStepCard.svelte';
-  import WorkflowStepDragImage from './WorkflowStepDragImage.svelte';
   import WorkflowSummary from './WorkflowSummary.svelte';
 
   type WorkflowJsonContent = Required<
@@ -57,12 +54,6 @@
   >;
 
   type EditMode = 'visual' | 'json';
-  type StepDragImage = {
-    description?: string;
-    isFilter: boolean;
-    label: string;
-    stepNumber: number;
-  };
 
   type Props = {
     data: PageData;
@@ -70,17 +61,13 @@
 
   let { data }: Props = $props();
 
-  let { id, enabled, name, description, trigger, steps } = $derived(data.workflow);
+  let { id, enabled, name, description, trigger } = $derived(data.workflow);
+  let steps = $state(data.workflow.steps);
   let savedWorkflow = $state(cloneDeep(data.workflow));
   let allowNavigation = $state(false);
   let isShowingNavigationDialog = $state(false);
   let isSaving = $state(false);
   let editMode = $state<EditMode>('visual');
-  let draggedIndex = $state<number | null>(null);
-  let dragHandleHoverIndex = $state<number | null>(null);
-  let dragImageElement = $state<HTMLElement | null>(null);
-  let dragImage = $state<StepDragImage>({ isFilter: false, label: '', stepNumber: 1 });
-  let dropTargetIndex = $state<number | null>(null);
 
   const workflowSummary = $derived({ name, description, trigger, steps });
   const workflowJsonContent = $derived<WorkflowJsonContent>({ name, description, enabled, trigger, steps });
@@ -96,7 +83,7 @@
   const handleAddStep = async () => {
     const step = await modalManager.show(WorkflowAddStepModal, { trigger });
     if (step) {
-      steps = [...steps, step];
+      steps.push(step);
     }
   };
 
@@ -107,10 +94,6 @@
     }
   };
 
-  const replaceStep = (index: number, step: WorkflowStepDto) => {
-    steps = steps.map((current, i) => (i === index ? cloneDeep(step) : current));
-  };
-
   const handleEditStep = async (index: number) => {
     const step = steps[index];
     if (!step) {
@@ -119,76 +102,27 @@
 
     const result = await modalManager.show(WorkflowEditStepModal, { trigger, step: cloneDeep(step) });
     if (result) {
-      replaceStep(index, result);
-    }
-  };
-
-  const handleDragStart = (index: number, event: DragEvent) => {
-    draggedIndex = index;
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', String(index));
-
-      const step = steps[index];
-      const method = step ? pluginManager.getMethod(step.method) : undefined;
-      dragImage = {
-        description: method?.description,
-        isFilter: method?.uiHints?.includes('filter') ?? false,
-        label: step ? pluginManager.getMethodLabel(step.method) : '',
-        stepNumber: index + 1,
-      };
-      flushSync();
-
-      if (dragImageElement) {
-        event.dataTransfer.setDragImage(dragImageElement, 16, 22);
-      }
-    }
-  };
-
-  const handleDragOver = (index: number, event: DragEvent) => {
-    if (draggedIndex === null) {
-      return;
-    }
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move';
-    }
-    if (dropTargetIndex !== index) {
-      dropTargetIndex = index;
-    }
-  };
-
-  const handleDragLeave = (index: number) => {
-    if (dropTargetIndex === index) {
-      dropTargetIndex = null;
+      steps[index] = result;
     }
   };
 
   const handleDrop = (index: number, event: DragEvent) => {
-    event.preventDefault();
-    const from = draggedIndex;
-    draggedIndex = null;
-    dropTargetIndex = null;
-    if (from === null || from === index) {
+    if (!event.dataTransfer) {
       return;
     }
+
+    const from = Number(event.dataTransfer.getData('text/plain'));
+
     const next = [...steps];
     const [moved] = next.splice(from, 1);
     next.splice(index, 0, moved);
     steps = next;
   };
 
-  const handleDragEnd = () => {
-    draggedIndex = null;
-    dragHandleHoverIndex = null;
-    dropTargetIndex = null;
-  };
-
   const handleDeleteStep = async (index: number) => {
     const confirmed = await modalManager.showDialog({ title: $t('step_delete'), prompt: $t('step_delete_confirm') });
     if (confirmed) {
       steps.splice(index, 1);
-      steps = [...steps];
     }
   };
 
@@ -410,23 +344,14 @@
           </CardHeader>
         </Card>
 
-        {#each steps as step, index (index)}
+        {#each steps as step, index (step.method + index)}
           <WorkflowStepCard
             {step}
             {index}
-            isDragging={draggedIndex === index}
-            isDragHandleHovered={dragHandleHoverIndex === index}
-            isDropTarget={dropTargetIndex === index && draggedIndex !== null && draggedIndex !== index}
             onEdit={handleEditStep}
             onDelete={handleDeleteStep}
             onInsertBefore={handleInsertStep}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
             onDrop={handleDrop}
-            onDragHandleEnter={(i) => (dragHandleHoverIndex = i)}
-            onDragHandleLeave={() => (dragHandleHoverIndex = null)}
           />
         {/each}
 
@@ -446,12 +371,5 @@
     </VStack>
   </Container>
 
-  <WorkflowStepDragImage
-    bind:ref={dragImageElement}
-    description={dragImage.description}
-    isFilter={dragImage.isFilter}
-    label={dragImage.label}
-    stepNumber={dragImage.stepNumber}
-  />
   <WorkflowSummary workflow={workflowSummary} />
 </AppShell>
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
index 7965f45c23..49e1a456ee 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
@@ -10,49 +10,29 @@
     mdiPlus,
     mdiTrashCanOutline,
   } from '@mdi/js';
+  import { flushSync, mount } from 'svelte';
   import { t } from 'svelte-i18n';
+  import WorkflowStepDragImage from './WorkflowStepDragImage.svelte';
 
   type Props = {
     step: WorkflowStepDto;
     index: number;
-    isDragging: boolean;
-    isDragHandleHovered: boolean;
-    isDropTarget: boolean;
     onEdit: (index: number) => void;
     onDelete: (index: number) => void;
     onInsertBefore: (index: number) => void;
-    onDragStart: (index: number, event: DragEvent) => void;
-    onDragEnd: () => void;
-    onDragOver: (index: number, event: DragEvent) => void;
-    onDragLeave: (index: number) => void;
     onDrop: (index: number, event: DragEvent) => void;
-    onDragHandleEnter: (index: number) => void;
-    onDragHandleLeave: () => void;
   };
 
-  let {
-    step,
-    index,
-    isDragging,
-    isDragHandleHovered,
-    isDropTarget,
-    onEdit,
-    onDelete,
-    onInsertBefore,
-    onDragStart,
-    onDragEnd,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-    onDragHandleEnter,
-    onDragHandleLeave,
-  }: Props = $props();
+  let { step, index, onEdit, onDelete, onInsertBefore, onDrop }: Props = $props();
 
   const method = $derived(pluginManager.getMethod(step.method));
   const isFilter = $derived(method?.uiHints?.includes('filter') ?? false);
   const configEntries = $derived(
     Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
   );
+  let isDragging = $state(false);
+  let isDropTarget = $state(false);
+  let hoverDrag = $state(false);
 
   const truncate = (input: string, max = 24) => (input.length > max ? input.slice(0, max - 1) + '…' : input);
 
@@ -73,14 +53,64 @@
       if (value.length === 0) {
         return $t('none');
       }
-      const items = value.map((v) => (v !== null && typeof v === 'object' ? '{…}' : String(v)));
+      const items = value.map((v) => (v !== null && typeof v === 'object' ? JSON.stringify(v) : String(v)));
       const joined = items.join(' · ');
       if (joined.length <= 28) {
         return `"${joined}"`;
       }
       return $t('items_count', { values: { count: value.length } });
     }
-    return '{…}';
+    return JSON.stringify(value);
+  };
+
+  const handleDragStart = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
+
+    isDragging = true;
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', String(index));
+
+    const dragElement = document.createElement('div');
+    document.body.append(dragElement);
+
+    mount(WorkflowStepDragImage, {
+      target: dragElement,
+      props: {
+        description: method?.description,
+        isFilter: method?.uiHints?.includes('filter') ?? false,
+        label: step ? pluginManager.getMethodLabel(step.method) : '',
+        stepNumber: index + 1,
+      },
+    });
+    flushSync();
+
+    event.dataTransfer.setDragImage(dragElement, 16, 22);
+  };
+
+  const handleDrop = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
+    event.preventDefault();
+
+    const from = Number(event.dataTransfer.getData('text/plain'));
+    if (from === index) {
+      return;
+    }
+
+    onDrop(index, event);
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    isDropTarget = true;
+  };
+
+  const handleDragEnd = () => {
+    isDragging = false;
+    isDropTarget = false;
   };
 </script>
 
@@ -104,15 +134,15 @@
     class="w-full transition-all"
     class:opacity-40={isDragging}
     class:scale-[0.99]={isDragging}
-    ondragover={(event) => onDragOver(index, event)}
-    ondragleave={() => onDragLeave(index)}
-    ondrop={(event) => onDrop(index, event)}
+    ondragover={handleDragOver}
+    ondragleave={() => (isDropTarget = false)}
+    ondrop={(event) => handleDrop(index, event)}
     role="listitem"
   >
     <Card
       class="shadow-none transition-colors {isDropTarget
         ? 'border-primary ring-2 ring-primary-200'
-        : isDragHandleHovered
+        : hoverDrag
           ? 'border-dashed border-primary'
           : ''}"
     >
@@ -123,10 +153,10 @@
             class="flex shrink-0 cursor-grab items-center justify-center rounded-md border border-transparent p-1 text-light-400 select-none hover:border-primary-200 hover:bg-primary-50 hover:text-primary active:cursor-grabbing"
             aria-label={$t('drag_to_reorder')}
             draggable="true"
-            onmouseenter={() => onDragHandleEnter(index)}
-            onmouseleave={onDragHandleLeave}
-            ondragstart={(event) => onDragStart(index, event)}
-            ondragend={onDragEnd}
+            onmouseenter={() => (hoverDrag = true)}
+            onmouseleave={() => (hoverDrag = false)}
+            ondragstart={(event) => handleDragStart(index, event)}
+            ondragend={handleDragEnd}
             title={$t('drag_to_reorder')}
           >
             <Icon icon={mdiDragVertical} size="20" />
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte
index adee9a5866..b538792e0e 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte
@@ -3,18 +3,16 @@
   import { mdiAutoFix, mdiFilterVariant } from '@mdi/js';
 
   type Props = {
-    ref?: HTMLElement | null;
     description?: string;
     isFilter: boolean;
     label: string;
     stepNumber: number;
   };
 
-  let { ref = $bindable(null), description, isFilter, label, stepNumber }: Props = $props();
+  let { description, isFilter, label, stepNumber }: Props = $props();
 </script>
 
 <div
-  bind:this={ref}
   aria-hidden="true"
   class="pointer-events-none fixed top-[-1000px] left-0 flex w-80 items-center gap-2.5 rounded-lg border border-light-200 bg-light px-3 py-2.5 text-sm/5 text-dark shadow-2xl"
 >
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
index 85bb9bea8d..8b44e45219 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
@@ -2,20 +2,18 @@
   import { pluginManager } from '$lib/managers/plugin-manager.svelte';
   import { getTriggerName } from '$lib/utils/workflow';
   import type { WorkflowStepDto, WorkflowTrigger } from '@immich/sdk';
-  import { Icon, IconButton, Text } from '@immich/ui';
+  import { Icon, IconButton, shortcut, Text } from '@immich/ui';
   import { mdiCheck, mdiClose, mdiContentCopy, mdiViewDashboardOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
 
-  type WorkflowSummaryData = {
-    name: string | null;
-    description: string | null;
-    trigger: WorkflowTrigger;
-    steps: WorkflowStepDto[];
-  };
-
   type Props = {
-    workflow: WorkflowSummaryData;
+    workflow: {
+      name: string | null;
+      description: string | null;
+      trigger: WorkflowTrigger;
+      steps: WorkflowStepDto[];
+    };
   };
 
   let { workflow }: Props = $props();
@@ -23,35 +21,6 @@
   let isOpen = $state(false);
   let justCopied = $state(false);
   let copyTimer: ReturnType<typeof setTimeout> | undefined;
-  let panelElement = $state<HTMLElement | undefined>(undefined);
-
-  $effect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        event.preventDefault();
-        isOpen = false;
-      }
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (panelElement && event.target instanceof Node && !panelElement.contains(event.target)) {
-        isOpen = false;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeydown, { capture: true });
-    document.addEventListener('pointerdown', handlePointerDown);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeydown, { capture: true });
-      document.removeEventListener('pointerdown', handlePointerDown);
-    };
-  });
 
   const formatConfigValue = (value: unknown): string => {
     if (value === null || value === undefined) {
@@ -127,9 +96,10 @@
   };
 </script>
 
+<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: () => (isOpen = false) }} />
+
 {#if isOpen}
   <aside
-    bind:this={panelElement}
     class="fixed inset-y-20 right-4 bottom-4 hidden max-w-lg flex-col overflow-hidden rounded-2xl border border-light-200 bg-light shadow-2xl sm:flex"
     transition:fly={{ x: 400, duration: 250 }}
     aria-label={$t('workflow_summary')}