diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx
index 7c9ba42..8d1b202 100755
--- a/comps/form/base/BaseForm.tsx
+++ b/comps/form/base/BaseForm.tsx
@@ -40,7 +40,7 @@ export const BaseForm = <T extends Record<string, any>>(
     const prop: FieldProp = {
       name: arg.name,
       on_load: arg.onLoad,
-      sub_type: arg.subType
+      sub_type: arg.subType,
     } as any;
     if (arg.onChange) prop.on_change = arg.onChange;
     return prop;
@@ -58,6 +58,11 @@ export const BaseForm = <T extends Record<string, any>>(
   };
 
   form.createFm = () => {
+    let size = "full";
+
+    if (form.internal.width > 650) {
+      size = "half";
+    }
     return {
       data: form.data,
       props: { label_mode: "vertical" },
@@ -66,7 +71,7 @@ export const BaseForm = <T extends Record<string, any>>(
           return [];
         },
       },
-      size: { field: "full" },
+      size: { field: size },
       render: form.render,
     } as any;
   };
@@ -96,19 +101,26 @@ export const BaseForm = <T extends Record<string, any>>(
         form.submit();
       }}
       className={cx(
-        "form c-flex-1 c-flex-col c-w-full c-h-full c-relative c-overflow-auto c-contents",
+        "form c-flex-1 c-flex c-flex-col c-w-full c-h-full c-relative c-overflow-auto c-contents",
         className
       )}
     >
       <div
         className={cx(
-          "form-inner c-flex-1 c-flex-wrap c-items-start c-content-start c-absolute c-inset-0 c-contents",
+          "form-inner c-flex-1 c-flex c-flex-row c-flex-wrap c-items-start c-content-start c-absolute c-inset-0 c-contents",
           css`
             padding-right: 10px;
           `
         )}
+        ref={(el) => {
+          if (el?.offsetWidth) {
+            form.internal.width = el?.offsetWidth;
+          }
+        }}
       >
-        {typeof children === "function" ? children(form) : children}
+        {form.internal.width && (
+          <>{typeof children === "function" ? children(form) : children}</>
+        )}
       </div>
     </form>
   );
diff --git a/comps/form/base/types.ts b/comps/form/base/types.ts
index d09cd19..7c3b14a 100755
--- a/comps/form/base/types.ts
+++ b/comps/form/base/types.ts
@@ -4,6 +4,9 @@ import { FMLocal, FieldLocal, FieldProp } from "../typings";
 export const default_base_form_local = {
   status: "init" as "init" | "submitting" | "ready",
   data: {} as any,
+  internal: {
+    width: 0,
+  },
 };
 
 type CreateFieldArg = {
@@ -13,7 +16,7 @@ type CreateFieldArg = {
   onChange?: (value: any) => void;
   render?: () => void;
   onLoad?: () => { value: string; label: string }[];
-  subType?: string
+  subType?: string;
 };
 
 export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & {
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 6c054a9..53a6aca 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -1,10 +1,9 @@
 import { FC, isValidElement } from "react";
-import { FMLocal, FieldLocal, FieldProp } from "../typings";
 import { FieldLoading } from "../../ui/field-loading";
+import { FMLocal, FieldLocal, FieldProp } from "../typings";
+import { FieldTypeInput, PropTypeInput } from "./type/TypeInput";
 import { MultiOption } from "./type/TypeMultiOption";
 import { SingleOption } from "./type/TypeSingleOption";
-import { FieldTypeInput, PropTypeInput } from "./type/TypeInput";
-import { isValid } from "date-fns";
 
 const modify = {
   timeout: null as any,