Merge pull request #1001 from senithkay/fix-helper-pane-misalignment

fix helper pane overflow from editor right when opened through toggle button

Author: kanushka

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;

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;

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';