fix: resized canvas size and fixed delete comments

src/components/FlowEditor/editor/Automation2FlowEditor.module.css

@@ -593,7 +593,7 @@
 
 .canvasArea {
   flex: 1;
-  padding: 2rem;
+  padding: 0;
   min-height: 400px;
   overflow-x: visible;
   overflow-y: hidden;

src/components/FlowEditor/editor/Automation2FlowEditor.tsx

@@ -136,6 +136,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
     zoom: 1,
     selectedNodeCount: 0,
     connectionSelected: false,
+    stickyNoteSelected: false,
   });
   const [canvasConnectionToolActive, setCanvasConnectionToolActive] = useState(false);
   const [canvasStickyNotes, setCanvasStickyNotes] = useState<CanvasStickyNote[]>([]);
@@ -822,6 +823,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
       zoomPercent: Math.round(canvasViewportEdit.zoom * 100),
       selectedNodeCount: canvasViewportEdit.selectedNodeCount,
       connectionSelected: canvasViewportEdit.connectionSelected,
+      stickyNoteSelected: canvasViewportEdit.stickyNoteSelected,
       connectionToolActive: canvasConnectionToolActive,
       canUndo: canCanvasUndo,
       canRedo: canCanvasRedo,

src/components/FlowEditor/editor/CanvasHeader.tsx

@@ -39,6 +39,7 @@ export interface CanvasHeaderCanvasEditProps {
   zoomPercent: number;
   selectedNodeCount: number;
   connectionSelected: boolean;
+  stickyNoteSelected: boolean;
   connectionToolActive: boolean;
   canUndo: boolean;
   canRedo: boolean;
@@ -206,7 +207,10 @@ export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
   };
 
   const _canDeleteSelection =
-    !!canvasEdit && (canvasEdit.selectedNodeCount > 0 || canvasEdit.connectionSelected);
+    !!canvasEdit &&
+    (canvasEdit.selectedNodeCount > 0 ||
+      canvasEdit.connectionSelected ||
+      canvasEdit.stickyNoteSelected);
   const _singleNodeOnly =
     !!canvasEdit && canvasEdit.selectedNodeCount === 1 && !canvasEdit.connectionSelected;
 

src/components/FlowEditor/editor/FlowCanvas.tsx

@@ -123,6 +123,8 @@ export interface FlowCanvasViewportEditState {
   zoom: number;
   selectedNodeCount: number;
   connectionSelected: boolean;
+  /** Canvas-Sticky-/Kommentarnote ausgewählt (nicht Workflow-Knoten). */
+  stickyNoteSelected: boolean;
 }
 
 export type FlowCanvasHandle = {
@@ -518,8 +520,9 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
       zoom,
       selectedNodeCount: selectedNodeIds.size,
       connectionSelected: !!selectedConnectionId,
+      stickyNoteSelected: !!selectedStickyId,
     });
-  }, [zoom, selectedNodeIds, selectedConnectionId, onViewportEditState]);
+  }, [zoom, selectedNodeIds, selectedConnectionId, selectedStickyId, onViewportEditState]);
 
   useEffect(() => {
     onConnectionToolActiveChange?.(connectionToolActive);
@@ -590,17 +593,27 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
           emitHistoryCheckpoint();
           return;
         }
-        if (selectedNodeIds.size === 0) return;
+        if (selectedNodeIds.size > 0) {
-        const ids = selectedNodeIds;
+          const ids = selectedNodeIds;
-        onNodesChange(nodes.filter((n) => !ids.has(n.id)));
+          onNodesChange(nodes.filter((n) => !ids.has(n.id)));
-        onConnectionsChange(
+          onConnectionsChange(
-          connections.filter((c) => !ids.has(c.sourceId) && !ids.has(c.targetId))
+            connections.filter((c) => !ids.has(c.sourceId) && !ids.has(c.targetId))
-        );
+          );
-        setSelectedNodeIds(new Set());
+          setSelectedNodeIds(new Set());
-        setEditingNodeId(null);
+          setEditingNodeId(null);
-        setEditingField(null);
+          setEditingField(null);
-        setSelectedStickyId(null);
+          setSelectedStickyId(null);
-        emitHistoryCheckpoint();
+          emitHistoryCheckpoint();
+          return;
+        }
+        const changeSticky = onStickyNotesChangeRef.current;
+        const sid = selectedStickyId;
+        if (sid && changeSticky) {
+          changeSticky(stickyNotesRef.current.filter((s) => s.id !== sid));
+          setSelectedStickyId(null);
+          setEditingStickyId(null);
+          emitHistoryCheckpoint();
+        }
       },
       duplicateSingleSelection: () => {
         if (selectedNodeIds.size !== 1) return;
@@ -663,6 +676,7 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
       onNodesChange,
       selectedConnectionId,
       selectedNodeIds,
+      selectedStickyId,
     ]
   );
 
@@ -1199,6 +1213,15 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
     emitHistoryCheckpoint();
   }, [selectedNodeIds, nodes, connections, onNodesChange, onConnectionsChange, emitHistoryCheckpoint]);
 
+  const handleDeleteSelectedStickyNote = useCallback(() => {
+    const change = onStickyNotesChangeRef.current;
+    if (!selectedStickyId || !change) return;
+    change(stickyNotesRef.current.filter((s) => s.id !== selectedStickyId));
+    setSelectedStickyId(null);
+    setEditingStickyId(null);
+    emitHistoryCheckpoint();
+  }, [selectedStickyId, emitHistoryCheckpoint]);
+
   React.useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
@@ -1220,12 +1243,22 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
         } else if (selectedNodeIds.size > 0) {
           e.preventDefault();
           handleDeleteNode();
+        } else if (selectedStickyId && onStickyNotesChangeRef.current) {
+          e.preventDefault();
+          handleDeleteSelectedStickyNote();
         }
       }
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [handleDeleteNode, handleDeleteConnection, selectedNodeIds.size, selectedConnectionId]);
+  }, [
+    handleDeleteNode,
+    handleDeleteConnection,
+    handleDeleteSelectedStickyNote,
+    selectedNodeIds.size,
+    selectedConnectionId,
+    selectedStickyId,
+  ]);
 
   const handleNodeUpdate = useCallback(
     (nodeId: string, updates: Partial<Pick<CanvasNode, 'title' | 'comment'>>) => {
@@ -1778,6 +1811,11 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
                   backgroundColor: pal.bg,
                   borderColor: pal.border,
                 }}
+                onFocus={() => {
+                  setSelectedStickyId(sn.id);
+                  setSelectedNodeIds(new Set());
+                  setSelectedConnectionId(null);
+                }}
                 onDoubleClick={(e) => {
                   e.stopPropagation();
                   setSelectedStickyId(sn.id);