fix expression overflow in record config model

[senithkay]

Purpose

Fix expression editor overflow in the record config model

Summary by CodeRabbit

• Bug Fixes
  • Improved height constraints and layout handling for the expression editor in both expanded and compact display modes, ensuring consistent visual behavior across different states.

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

[coderabbitai]

Walkthrough

Modified the ChipExpressionEditor component to improve height and sizing constraints for CodeMirror editor. Added maxHeight constraints to the scroller across expanded and non-expanded states, reworked conditional height logic based on expanded mode or explicit sx height, and standardized editor container sizing to use 100% width and height when applicable.

Changes

Cohort / File(s)	Summary
Height and sizing constraint updates workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx	Adds maxHeight constraints to CodeMirror scroller for expanded/non-expanded states; reworks height logic to conditionally apply height: 100% when expanded or when sx contains explicit height; sets editor inner div to width/height: 100% unconditionally; updates container and wrapper divs with conditional height: 100% in expanded mode.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify conditional height logic paths (expanded state vs. sx height vs. fallback 150px max) execute correctly
• Confirm maxHeight constraints don't conflict with existing layout or cause unexpected scroll behavior

Possibly related PRs

• #827: Modifies Chip expression editor sizing and scroll behavior (max-height and overflow handling) affecting the same editor layout.

Suggested reviewers

• hevayo
• gigara
• kanushka

Poem

🐰 Heights aligned with care so fine,
Containers stretch with 100% design,
Max-heights constrain the scroll,
Expanded or snug, we reach our goal,
A chip editor, now pixel-perfect and whole!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description contains only the Purpose section with minimal detail, while the template requires multiple sections including Goals, Approach, UI Component Development, test coverage, security checks, and more.	Complete the description by adding Goals section explaining how the height constraints fix the overflow issue, Approach section documenting the implementation strategy, and at minimum filling out Automation tests and Test environment sections.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix expression overflow in record config model' directly aligns with the main change of the pull request, which addresses expression editor overflow in the record config model by adjusting height constraints in the ChipExpressionEditor component.
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

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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/components/ChipExpressionEditor.tsx (2)

304-317: Eliminate duplicate theme configuration.

The first two conditional branches (lines 305-308 and 310-313) are identical. They can be combined to reduce code duplication and improve maintainability.

Apply this diff to consolidate the logic:

-                ...(props.isInExpandedMode
-                    ? [EditorView.theme({
-                        "&": { height: "100%" },
-                        ".cm-scroller": { overflow: "auto", maxHeight: "100%" }
-                    })]
-                    : props.sx && 'height' in props.sx
-                        ? [EditorView.theme({
-                            "&": { height: "100%" },
-                            ".cm-scroller": { overflow: "auto", maxHeight: "100%" }
-                        })]
-                        : [EditorView.theme({
-                            "&": { maxHeight: "150px" },
-                            ".cm-scroller": { overflow: "auto", maxHeight: "150px" }
-                        })])
+                ...(props.isInExpandedMode || (props.sx && 'height' in props.sx)
+                    ? [EditorView.theme({
+                        "&": { height: "100%" },
+                        ".cm-scroller": { overflow: "auto", maxHeight: "100%" }
+                    })]
+                    : [EditorView.theme({
+                        "&": { maxHeight: "150px" },
+                        ".cm-scroller": { overflow: "auto", maxHeight: "150px" }
+                    })])

---

434-434: Simplify the nested ternary for better readability.

The nested ternary checking isInExpandedMode, then props.sx && 'height' in props.sx, is difficult to parse quickly. Consider extracting this logic to improve clarity.

Consider this approach:

+            const containerHeight = props.isInExpandedMode 
+                ? '100%' 
+                : (props.sx && 'height' in props.sx) 
+                    ? undefined  // Let sx.height take effect
+                    : 'auto';
+
             <ChipEditorContainer ref={fieldContainerRef} style={{
                 position: 'relative',
                 ...props.sx,
-                ...(props.isInExpandedMode ? { height: '100%' } : props.sx && 'height' in props.sx ? {} : { height: 'auto' })
+                ...(containerHeight !== undefined && { height: containerHeight })
             }}>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 534b3ad and aeef245.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧠 Learnings (4)

📚 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/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/**/*.{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/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/**/*.tsx : Use React 18.2.0 features including concurrent rendering and automatic batching; avoid class components in favor of functional components with hooks

Applied to files:

• 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/utils/diagram.ts : Implement dynamic node height calculation based on visible function count: BASE_HEIGHT (72px) + (FUNCTION_HEIGHT (48px) per visible function) + VIEW_ALL_BUTTON_HEIGHT (40px if needed)

Applied to files:

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

🔇 Additional comments (1)

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

437-446: I'm unable to proceed with verification due to a repository cloning failure. Let me explain the situation:

Repository Access Issue

The sandbox environment encountered an error while attempting to clone the wso2/vscode-extensions repository. This prevents me from:

1. Examining the actual code around lines 437-446 to verify the height styling logic
2. Confirming the CodeMirror theme configuration to validate the claim about maxHeight: "150px"
3. Inspecting related code to understand the original issue context or test patterns
4. Verifying the actual impact of the alleged circular dependency in different render modes

What the review comment claims (unverified):

• Editor div unconditionally sets height: '100%'
• Wrapper div conditionally sets height only in expanded or explicit height modes
• CodeMirror theme's maxHeight: "150px" prevents unbounded growth
• The logic is "fragile" and could behave unexpectedly

Without access to the repository, I cannot confirm whether these technical claims are accurate or whether the suggested fix actually addresses a real problem.