From 709ebbd23d76e2f97b8e8cc1cb49b671477dd0a9 Mon Sep 17 00:00:00 2001
From: Alexander Gekov <40495748+alexander-gekov@users.noreply.github.com>
Date: Mon, 18 May 2026 10:39:09 +0300
Subject: [PATCH] fix(editor): Prevent expression editor result panel from
 overflowing in HTML and Markdown render modes (#30470)

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/ExpressionEditModal.test.ts    | 33 ++++++++++++++++++-
 .../components/ExpressionEditModal.vue        |  6 +++-
 .../runData/components/RunDataMarkdown.vue    |  1 +
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.test.ts b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.test.ts
index ca97a820dcd..d1465c2fb14 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.test.ts
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.test.ts
@@ -1,7 +1,7 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import ExpressionEditModal from './ExpressionEditModal.vue';
 import { createTestingPinia } from '@pinia/testing';
-import { waitFor, within } from '@testing-library/vue';
+import { fireEvent, waitFor, within } from '@testing-library/vue';
 import { setActivePinia, type Pinia } from 'pinia';
 import { defaultSettings } from '@/__tests__/defaults';
 import { useSettingsStore } from '@/app/stores/settings.store';
@@ -179,5 +179,36 @@ describe('ExpressionEditModal', () => {
 				expect(getByTestId('radio-button-markdown')).toBeInTheDocument();
 			});
 		});
+
+		it('only applies the CodeMirror editor class in text mode', async () => {
+			const { getByTestId } = renderModal({
+				pinia,
+				props: {
+					parameter: createTestNodeProperties({ name: 'foo', type: 'string' }),
+					path: '',
+					modelValue: 'test',
+					dialogVisible: true,
+				},
+			});
+
+			await waitFor(() => {
+				expect(getByTestId('expression-modal-output')).toHaveClass('editor');
+			});
+
+			await fireEvent.click(getByTestId('radio-button-html'));
+			await waitFor(() => {
+				expect(getByTestId('expression-modal-output')).not.toHaveClass('editor');
+			});
+
+			await fireEvent.click(getByTestId('radio-button-markdown'));
+			await waitFor(() => {
+				expect(getByTestId('expression-modal-output')).not.toHaveClass('editor');
+			});
+
+			await fireEvent.click(getByTestId('radio-button-text'));
+			await waitFor(() => {
+				expect(getByTestId('expression-modal-output')).toHaveClass('editor');
+			});
+		});
 	});
 });
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.vue
index 4dc96851941..87538192f11 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionEditModal.vue
@@ -255,7 +255,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 					<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
 						<ExpressionOutput
 							ref="expressionResultRef"
-							:class="$style.editor"
+							:class="outputRenderMode === 'text' ? $style.editor : undefined"
 							:segments="segments"
 							:extensions="theme"
 							:render="outputRenderMode"
@@ -323,12 +323,14 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 	display: flex;
 	flex: 1 1 0;
 	min-height: 0;
+	min-width: 0;
 }
 
 .io {
 	display: flex;
 	flex: 1 1 0;
 	gap: var(--spacing--sm);
+	min-width: 0;
 }
 
 .input,
@@ -337,6 +339,8 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 	flex-direction: column;
 	gap: var(--spacing--2xs);
 	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
 }
 
 .output {
diff --git a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataMarkdown.vue b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataMarkdown.vue
index d5b46411cc7..be2397eb1dc 100644
--- a/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataMarkdown.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataMarkdown.vue
@@ -27,6 +27,7 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	overflow: auto;
+	overflow-wrap: anywhere;
 	padding: var(--spacing--sm) var(--spacing--md);
 	border: var(--border);
 	border-radius: var(--radius);