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

[senithkay]

Purpose

The helper pane in the expression editor could overflow beyond the right boundary of the editor when opened via the toggle button, making part of the pane inaccessible to users. This fix addresses the positioning issue and ensures the helper pane always stays within the editor's visible area.

Resolves: wso2/product-ballerina-integrator#1923

Goals

Ensure the helper pane is correctly positioned when opened via the toggle button, preventing overflow beyond the expression editor's right boundary. This improves usability and prevents UI elements from being inaccessible.

Approach

Updated the helper pane positioning logic to consider the editor's width when calculating the left position. The position is adjusted dynamically to prevent the pane from exceeding the editor bounds. Now, regardless of the toggle button location, the helper pane stays fully visible.

Summary by CodeRabbit

• Bug Fixes
  • Improved helper pane positioning in the expression editor to use editor-boundary calculations instead of viewport-based positioning, giving more accurate overflow handling.
  • Made helper pane sizing consistent across interactions, reducing unexpected shifts when focusing, selecting, or editing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Consolidated a hard-coded helper pane width into a new exported constant and updated helper-pane positioning to compute overflow relative to the editor boundary instead of the viewport across ChipExpressionEditor-related code.

Changes

Cohort / File(s)	Summary
Constants added workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts	Added export const HELPER_PANE_WIDTH = 300;.
Positioning logic updates workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts, workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx	Replaced local hard-coded HELPER_PANE_WIDTH usages with an import from constants.ts; changed overflow/position calculations to use editorWidth and relativeRight (editor-boundary) rather than window/viewport measurements, keeping same left-adjustment behavior when overflow occurs.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check correct import/use of HELPER_PANE_WIDTH in all updated locations.
• Verify editor-boundary overflow math for edge cases (small editor widths, RTL layouts).
• Confirm no regressions in pane toggling/visibility and that CSS/layout assumptions still hold.

Possibly related PRs

• fix expression overflow in record config model #1004 — touches ChipExpressionEditor layout/positioning logic; likely overlaps on helper-pane placement changes.
• Expression editor bug fixes and maintainability improvement #906 — centralizes helper-pane constants and adjusts editor sizing/position behavior; strongly related to these edits.

Suggested reviewers

• hevayo
• gigara

Poem

🐰 A little width once lived thrice,
Now one small constant keeps things nice.
I hop, I nudge, the pane sits true,
Snug in the editor—happy view! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing helper pane overflow when opened through a toggle button, which aligns with the code changes that adjust positioning logic.
Description check	✅ Passed	The PR description includes Purpose, Goals, and Approach sections with specific details about the fix, though it lacks several template sections like UI Component Development, Automation tests, and others.
Linked Issues check	✅ Passed	The PR addresses issue #1923 by fixing the helper pane positioning logic to prevent overflow beyond the editor's right boundary, ensuring the popup stays within visible viewport bounds.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the helper pane positioning issue: extracting HELPER_PANE_WIDTH to constants and updating overflow calculation logic to use editor boundaries.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7dae197 and f9923f4.

📒 Files selected for processing (1)

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts (1)

35-36: Consistent overflow correction using shared HELPER_PANE_WIDTH

Importing HELPER_PANE_WIDTH and using the same overflow correction pattern in buildOnFocusListner, buildOnSelectionChange, and buildOnChangeListner keeps helper pane positioning consistent with the editor’s right boundary and removes the previous duplicated magic numbers. This aligns well with the PR goal.

If this positioning logic evolves further, consider extracting a small utility like computeHelperPaneLeft(editorRect, initialLeft) so these three listeners (and any future ones) stay in sync without copy‑pasting the same editorWidth / relativeRight / overflow block.

Also applies to: 430-456, 465-492, 531-568

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx (1)

52-52: Toggle-based helper pane now respects editor right boundary

Importing HELPER_PANE_WIDTH and applying the same editorWidth / relativeRight / overflow correction in handleHelperPaneManualToggle ensures the helper pane opened via the toggle no longer overflows past the editor’s right edge and stays consistent with the caret-based positioning logic from CodeUtils. For extremely narrow editors (narrower than HELPER_PANE_WIDTH), the pane will shift left (with a negative left), matching the existing behavior from the cursor-driven paths.

If you later decide the pane should also never extend past the editor’s left edge, you could revisit this calculation in both the toggle handler and the CodeUtils listeners and clamp left to a minimum of 0, but that would be a broader UX decision.

Also applies to: 244-256

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61167a4 and 7dae197.

📒 Files selected for processing (3)

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts (1 hunks)
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx (2 hunks)
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (4)

📓 Common learnings

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/**/*.{ts,tsx} : Define all constants (node types, sizing, spacing) in src/resources/constants.ts and import them where needed instead of hardcoding values

📚 Learning: 2025-11-25T06:34:10.812Z

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/**/*.{ts,tsx} : Define all constants (node types, sizing, spacing) in src/resources/constants.ts and import them where needed instead of hardcoding values

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

📚 Learning: 2025-11-24T22:16:28.380Z

Learnt from: dan-niles
Repo: wso2/vscode-extensions PR: 980
File: workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx:384-412
Timestamp: 2025-11-24T22:16:28.380Z
Learning: In the RichTextTemplateEditor component (workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx), token fetching on external `value` prop changes is intentionally disabled. Users cannot edit both the minimized and expanded editors simultaneously, so tokens only need to be generated based on user typing in the expanded editor view, not on external prop updates.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

📚 Learning: 2025-11-25T06:34:10.812Z

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/**/*.tsx : Implement lazy expansion of functions: only render function items when they are visible to improve performance for large function lists

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts
• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

🧬 Code graph analysis (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts (1)

• HELPER_PANE_WIDTH (21-21)

🔇 Additional comments (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/constants.ts (1)

19-22: Centralized helper pane width constant is appropriate

Defining HELPER_PANE_WIDTH once here and reusing it across consumers is a good move and keeps overflow correction logic consistent, assuming 300 matches the actual rendered helper pane width in CSS.