From 99aab9f40ded3b6164c87f186b33962ca1a36eb8 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 3 Feb 2026 13:36:51 +0100
Subject: [PATCH] Fix spaces in code step + suggestion overflow (#17664)

- fixedOverflowWidgets fixes the suggestions being overflow outside the
editor
- on focus, stop event propagation to avoid catching spaces as document
level events
---
 .../components/WorkflowEditActionCode.tsx     |  1 +
 .../code-editor/components/CodeEditor.tsx     | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
index 1c1bc6822d..fb02bdc914 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
@@ -443,6 +443,7 @@ export const WorkflowEditActionCode = ({
                   scrollBeyondLastLine: false,
                   padding: { top: 4, bottom: 4 },
                   lineNumbersMinChars: 2,
+                  fixedOverflowWidgets: true,
                 }}
                 readonly={actionOptions.readonly}
                 onEnterFullScreen={handleEnterFullScreen}
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
index 78a857ca02..c89d80d329 100644
--- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
@@ -5,7 +5,7 @@ import { Loader } from '@ui/feedback/loader/components/Loader';
 import { BASE_CODE_EDITOR_THEME_ID } from '@ui/input/code-editor/constants/BaseCodeEditorThemeId';
 import { getBaseCodeEditorTheme } from '@ui/input/code-editor/theme/utils/getBaseCodeEditorTheme';
 import { type editor } from 'monaco-editor';
-import { useState } from 'react';
+import { type KeyboardEvent, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 type CodeEditorVariant = 'default' | 'with-header' | 'borderless';
@@ -113,6 +113,7 @@ export const CodeEditor = ({
   const [editor, setEditor] = useState<
     editor.IStandaloneCodeEditor | undefined
   >(undefined);
+  const [isEditorFocused, setIsEditorFocused] = useState(false);
 
   const setModelMarkers = (
     editor: editor.IStandaloneCodeEditor | undefined,
@@ -128,12 +129,18 @@ export const CodeEditor = ({
     }
   };
 
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (isEditorFocused) {
+      event.stopPropagation();
+    }
+  };
+
   return isLoading ? (
     <StyledEditorLoader height={height} variant={variant}>
       <Loader />
     </StyledEditorLoader>
   ) : (
-    <>
+    <div onKeyDown={handleKeyDown}>
       <input
         type="hidden"
         data-testid="code-editor-value"
@@ -159,6 +166,13 @@ export const CodeEditor = ({
           );
           monaco.editor.setTheme(BASE_CODE_EDITOR_THEME_ID);
 
+          editor.onDidFocusEditorWidget(() => {
+            setIsEditorFocused(true);
+          });
+          editor.onDidBlurEditorWidget(() => {
+            setIsEditorFocused(false);
+          });
+
           onMount?.(editor, monaco);
           setModelMarkers(editor, monaco);
         }}
@@ -185,6 +199,6 @@ export const CodeEditor = ({
           ...options,
         }}
       />
-    </>
+    </div>
   );
 };