From 7dae197a47edf32e5c671a34bd0df68e985bab06 Mon Sep 17 00:00:00 2001 From: Senith Uthsara Date: Tue, 25 Nov 2025 13:46:46 +0530 Subject: [PATCH] fix helper pane overflow from editor right when opned through toggle button --- .../ChipExpressionEditor/CodeUtils.ts | 4 +--- .../components/ChipExpressionEditor.tsx | 10 +++++----- .../ChipExpressionEditor/constants.ts | 1 + 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts index 9c6a1a2ad66..eb454b683da 100644 --- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts +++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts @@ -32,6 +32,7 @@ import { getTokenTypeColor, getChipDisplayContent } from "./chipStyles"; +import { HELPER_PANE_WIDTH } from "./constants"; export type TokenStream = number[]; @@ -443,7 +444,6 @@ export const buildOnFocusListner = (onTrigger: (cursor: CursorInfo) => void) => let relativeTop = coords.bottom - editorRect.top + 5; let relativeLeft = coords.left - editorRect.left; - const HELPER_PANE_WIDTH = 300; const editorWidth = editorRect.width; const relativeRight = relativeLeft + HELPER_PANE_WIDTH; const overflow = relativeRight - editorWidth; @@ -477,7 +477,6 @@ export const buildOnSelectionChange = (onTrigger: (cursor: CursorInfo) => void) let relativeTop = coords.bottom - editorRect.top + 5; let relativeLeft = coords.left - editorRect.left; - const HELPER_PANE_WIDTH = 300; const editorWidth = editorRect.width; const relativeRight = relativeLeft + HELPER_PANE_WIDTH; const overflow = relativeRight - editorWidth; @@ -548,7 +547,6 @@ export const buildOnChangeListner = (onTrigeer: (newValue: string, cursor: Curso let relativeTop = coords.bottom - editorRect.top + 5; let relativeLeft = coords.left - editorRect.left; - const HELPER_PANE_WIDTH = 300; const editorWidth = editorRect.width; const relativeRight = relativeLeft + HELPER_PANE_WIDTH; const overflow = relativeRight - editorWidth; diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx index a8ea859d6e9..f51196e59bf 100644 --- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx +++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx @@ -49,6 +49,7 @@ import FXButton from "./FxButton"; import { HelperPaneToggleButton } from "./HelperPaneToggleButton"; import { HelperPane } from "./HelperPane"; import { listContinuationKeymap } from "../../../ExpandedEditor/utils/templateUtils"; +import { HELPER_PANE_WIDTH } from "../constants"; type HelperPaneState = { isOpen: boolean; @@ -245,11 +246,10 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone let top = buttonRect.bottom - editorRect.top; let left = buttonRect.left - editorRect.left; - // Add overflow correction for window boundaries - const HELPER_PANE_WIDTH = 300; - const viewportWidth = window.innerWidth; - const absoluteLeft = buttonRect.left; - const overflow = absoluteLeft + HELPER_PANE_WIDTH - viewportWidth; + // Add overflow correction for editor boundaries + const editorWidth = editorRect.width; + const relativeRight = left + HELPER_PANE_WIDTH; + const overflow = relativeRight - editorWidth; if (overflow > 0) { left -= overflow; diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts index 52c643fde92..8ecaacd8905 100644 --- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts +++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts @@ -18,6 +18,7 @@ export const CHIP_EXPRESSION_EDITOR_HEIGHT = 26; export const EXPANDED_EDITOR_HEIGHT = 500; +export const HELPER_PANE_WIDTH = 300; // Data attributes export const DATA_CHIP_ATTRIBUTE = 'data-chip';