Merge branch 'main' into zero-mapping-llm

Author: VellummyilumVinoth

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/TemplateMarkdownToolbar.tsx

@@ -18,7 +18,7 @@
 
 import React from "react";
 import styled from "@emotion/styled";
-import { ThemeColors, Icon, Switch } from "@wso2/ui-toolkit";
+import { ThemeColors, Icon } from "@wso2/ui-toolkit";
 import { EditorView } from "@codemirror/view";
 import {
     insertMarkdownFormatting,
@@ -178,21 +178,6 @@ export const TemplateMarkdownToolbar = React.forwardRef<HTMLDivElement, Template
                     <Icon name="bi-checklist" sx={{ width: "20px", height: "20px", fontSize: "20px" }} />
                 </ToolbarButton>
             </ToolbarButtonGroup>
-
-            {onTogglePreview && (
-                <Switch
-                    checked={isPreviewMode}
-                    leftLabel="Edit"
-                    rightLabel="Preview"
-                    onChange={onTogglePreview}
-                    checkedColor="var(--vscode-button-background)"
-                    checkedBorder="1px solid color-mix(in srgb, var(--vscode-dropdown-border) 75%, transparent)"
-                    enableTransition={false}
-                    sx={{
-                        borderColor: ThemeColors.OUTLINE_VARIANT
-                    }}
-                />
-            )}
         </ToolbarContainer>
     );
 });

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