Update JSON Schema Form 2

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx

@@ -18,7 +18,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
             </div>
 
             {/* Container for the control buttons with vertical alignment */}
-            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: "38px" }}>
+            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: "58px" }}>
               {/* Move down button */}
               {element.hasMoveDown && (
                 <Button

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx

@@ -38,7 +38,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
     xl: 8,  // Extra large devices
   };
 
-  const { rowGutter = 24, colSpan = defaultResponsiveColSpan } = uiSchema?.['ui:props'] || {};
+  const { rowGutter = 4, colSpan = defaultResponsiveColSpan } = uiSchema?.['ui:props'] || {};
 
   // Generate responsive colSpan props for each element
   const calculateResponsiveColSpan = (element: any) => {
@@ -54,12 +54,12 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
   return (
     <ConfigConsumer>
       {(configProps) => (
-        <fieldset id={idSchema.$id}>
+        <fieldset id={idSchema.$id} className="form-section">
           <Row gutter={rowGutter}>
-            {title && (
-              <Col span={24}>
+            {schema.type === 'object' && title && (
+              <legend>
                 <TitleFieldTemplate id={titleId(idSchema)} title={title} required={props.required} schema={schema} uiSchema={uiSchema} registry={registry} />
-              </Col>
+              </legend>
             )}
             {description && (
               <Col span={24} style={DESCRIPTION_COL_STYLE}>

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx

@@ -27,6 +27,7 @@ import { EditorContext } from "comps/editorState";
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import { Select } from 'antd';
+import Title from 'antd/es/typography/Title';
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -233,6 +234,8 @@ let FormBasicComp = (function () {
       "ui:submitButtonOptions"
     ] as UISchemaSubmitButtonOptions;
 
+    const schema = props.schema;
+
     return (
       <Container $style={props.style} $animationStyle={props.animationStyle}>
         <ScrollBar
@@ -245,6 +248,9 @@ let FormBasicComp = (function () {
             hideScrollbar={!props.showVerticalScrollbar}
           >
         <ErrorBoundary>
+          <Title level={2} style={{ marginBottom: '24px' }}>
+            {schema.title as string | number}
+          </Title>
           <Form
             validator={validator}
             schema={props.schema}
@@ -314,7 +320,7 @@ let FormBasicComp = (function () {
                       target={"_blank"}
                       rel="noreferrer"
                     >
-                      JSON schema
+                      JSON Schema
                     </a>
                   </>
                 ),
@@ -352,7 +358,7 @@ let FormBasicComp = (function () {
                       target={"_blank"}
                       rel="noreferrer"
                     >
-                      UI schema
+                      UI Schema
                     </a>
                   </>
                 ),