improve: update css

src/components/MarkdownTemplate/LayoutEditor.js

@@ -5,6 +5,7 @@ const LayoutEditor = ({layout, onChange}) => {
     return (
         <textarea
             className="textarea"
+            style={{ height: "60vh" }}
             value={_layout}
             onChange={(e) => {
                 setLayout(e.target.value);

src/components/MarkdownTemplate/MarkdownTemplateEditor.js

@@ -65,6 +65,7 @@ const MarkdownTemplateEditor = () => {
                 <div className="columns is-variable is-8">
                     <div className="column">
                         <h3 className="title is-5">Layout</h3>
+
                         <div className="box">
                             <LayoutEditor
                                 layout={layout}
@@ -72,15 +73,15 @@ const MarkdownTemplateEditor = () => {
                                 onChange={(newLayout) => setLayout(newLayout)}
                             />
                         </div>
+
                     </div>
                     <div className="column">
                         <h3 className="title is-5">Parameters</h3>
-                        <div className="box">
                         <ParametersManager
                             parameters={parameters}
                             onChange={(newParameters) => setParameters(newParameters)}
                         />
-                        </div>
+
                     </div>
                 </div>
                 <div className="field is-grouped">

src/components/MarkdownTemplate/ParametersManager.js

@@ -3,18 +3,36 @@ import TypeEditor from "./TypeEditor";
 
 const ParametersManager = ({ parameters, onChange }) => {
     const [_parameters, setParameters] = useState(parameters || []);
+    const [expandedStates, setExpandedStates] = useState({});
 
     const handleAdd = () => {
         const updated = [
             ..._parameters,
             {
                 name: "",
-                type: { base_type: "string" }
+                type: { 
+                    base_type: "string",
+                    definition: {}
+                }
             }
         ];
         setParameters(updated);
         onChange(updated);
     };
+
+    const handleTypeChange = (index, newType) => {
+        const updated = [..._parameters];
+        if (newType.base_type === "list" && !newType.extend_type) {
+            newType.extend_type = {
+                base_type: "string",
+                definition: {}
+            };
+        }
+        updated[index].type = newType;
+        setParameters(updated);
+        onChange(updated);
+    };
+
     useEffect(() => {
         setParameters(parameters);
     }, [parameters]);
@@ -33,6 +51,13 @@ const ParametersManager = ({ parameters, onChange }) => {
         onChange(updated);
     };
 
+    const toggleExpand = (index) => {
+        setExpandedStates(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+
     return (
         <div className="box">
             <div className="field">
@@ -42,11 +67,12 @@ const ParametersManager = ({ parameters, onChange }) => {
                     </button>
                 </div>
             </div>
+            <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
                 {_parameters.map((param, index) => (
-                <div key={index} className="box" style={{ marginBottom: "1rem" }}>
+                    <div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
                         <div className="field is-grouped is-grouped-multiline">
                             <div className="control is-expanded">
-                            <label className="label">Name:</label>
+                                <label className="label mb-1">Name:</label>
                                 <input
                                     type="text"
                                     className="input"
@@ -65,22 +91,28 @@ const ParametersManager = ({ parameters, onChange }) => {
                             </div>
                         </div>
                         <div className="field">
-                        <label className="label">Type:</label>
+                            <div className="is-flex is-justify-content-space-between is-align-items-center mb-1">
+                                <label className="label mb-0">Type:</label>
+                                <button 
+                                    className="button is-small"
+                                    onClick={() => toggleExpand(index)}
+                                >
+                                    {expandedStates[index] ? "-" : "+"}
+                                </button>
+                            </div>
+                            {expandedStates[index] && (
                                 <div className="control">
                                     <TypeEditor
                                         type={param.type}
-                                onChange={(newType) => {
+                                        onChange={(newType) => handleTypeChange(index, newType)}
-                                    const updated = [..._parameters];
-                                    updated[index].type = newType;
-                                    setParameters(updated);
-                                    onChange(updated);
-                                }}
                                     />
                                 </div>
+                            )}
                         </div>
                     </div>
                 ))}
             </div>
+        </div>
     );
 };
 

src/components/Markdowns/MarkdownEditor.js

@@ -277,7 +277,7 @@ const MarkdownEditor = () => {
                                     </div>
                                 ) : (
                                     <TemplatedEditor
-                                        style={{height: "70vh"}}
+                                        style={{height: "40vh"}}
                                         content={content}
                                         template={!markdown?.id ? selectedTemplate : template}
                                         onContentChanged={(k, v) => setContent(

src/components/Markdowns/TemplatedEditor.js

@@ -28,6 +28,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
                         <label className="label">{__namespace}</label>
                         <div className="control">
                             <textarea
+                                style={{maxHeight: "10vh"}}
                                 className="textarea"
                                 value={value}
                                 onChange={(e) => onContentChanged(variable.name, e.target.value)}
@@ -152,7 +153,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
     return <>{renderField()}</>;
 };
 
-const TemplatedEditor = ({ content, template, onContentChanged }) => {
+const TemplatedEditor = ({ content, template, onContentChanged, style }) => {
     const tpl = template || {
         parameters: [{ name: "markdown", type: { base_type: "markdown", definition: {} } }],
         layout: "<markdown/>",
@@ -160,7 +161,17 @@ const TemplatedEditor = ({ content, template, onContentChanged }) => {
     };
 
     return (
-        <div className="box">
+        <div className="box" style={{
+            ...style,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+        }}>
+            <div style={{
+                flex: 1,
+                overflowY: "auto",
+                padding: "1rem"
+            }}>
                 {tpl.parameters.map((variable, idx) => (
                     <TemplatedEditorComponent
                         key={idx}
@@ -171,6 +182,7 @@ const TemplatedEditor = ({ content, template, onContentChanged }) => {
                     />
                 ))}
             </div>
+        </div>
     );
 };