Merge pull request #1004 from senithkay/fix-expression-overflow-record-config

fix expression overflow in record config model

Author: kanushka

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

@@ -304,20 +304,16 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
                 ...(props.isInExpandedMode
                     ? [EditorView.theme({
                         "&": { height: "100%" },
-                        ".cm-scroller": { overflow: "auto" }
+                        ".cm-scroller": { overflow: "auto", maxHeight: "100%" }
                     })]
                     : props.sx && 'height' in props.sx
                         ? [EditorView.theme({
-                            "&": {
-                                height: typeof (props.sx as any).height === 'number' ?
-                                    `${(props.sx as any).height}px` :
-                                    (props.sx as any).height
-                            },
-                            ".cm-scroller": { overflow: "auto" }
+                            "&": { height: "100%" },
+                            ".cm-scroller": { overflow: "auto", maxHeight: "100%" }
                         })]
                         : [EditorView.theme({
                             "&": { maxHeight: "150px" },
-                            ".cm-scroller": { overflow: "auto" }
+                            ".cm-scroller": { overflow: "auto", maxHeight: "150px" }
                         })])
             ]
         });
@@ -435,14 +431,18 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
             <ChipEditorContainer ref={fieldContainerRef} style={{
                 position: 'relative',
                 ...props.sx,
-                ...(props.isInExpandedMode ? { height: '100%' } : { height: 'auto' })
+                ...(props.isInExpandedMode ? { height: '100%' } : props.sx && 'height' in props.sx ? {} : { height: 'auto' })
             }}>
                 {!props.isInExpandedMode && <FXButton />}
-                <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+                <div style={{ 
+                    position: 'relative', 
+                    width: '100%', 
+                    ...(props.isInExpandedMode || (props.sx && 'height' in props.sx) ? { height: '100%' } : {})
+                }}>
                     <div ref={editorRef} style={{
                         border: '1px solid var(--vscode-dropdown-border)',
-                        ...props.sx,
-                        ...(props.isInExpandedMode ? { height: '100%' } : { height: 'auto', maxHeight: '150px' })
+                        width: '100%',
+                        height: '100%'
                     }} />
                     {helperPaneState.isOpen &&
                         <HelperPane