WIP

Author: ytkimirti

src/components/databrowser/components/display/display-list-edit.tsx

@@ -80,13 +80,13 @@ const ListEditForm = ({
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={onSubmit} className="flex flex-col gap-2">
+      <form onSubmit={onSubmit} className="flex h-full flex-col gap-2">
         <div className="flex grow flex-col gap-2">
           {type !== "list" && (
             <FormItem
               readOnly={type === "stream"}
               name="key"
-              height={type === "set" ? 250 : 100}
+              // height={type === "set" ? 250 : 100}
               label={keyLabel}
               data={itemKey}
             />
@@ -99,7 +99,7 @@ const ListEditForm = ({
               <FormItem
                 readOnly={type === "stream"}
                 name="value"
-                height={type === "list" ? 250 : 100}
+                // height={type === "list" ? undefined : 100}
                 label={valueLabel}
                 data={itemValue ?? ""}
               />
@@ -195,14 +195,19 @@ const FormItem = ({
   })
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className={cn("flex flex-col gap-1", !height && "h-full")}>
       <div className="flex items-center gap-1 text-xs">
         <span className="font-medium text-zinc-700">{label}</span>{" "}
         <span className="text-zinc-300">/</span>
         {selector}
       </div>
 
-      <div className="overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm">
+      <div
+        className={cn(
+          "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm",
+          !height && "h-full"
+        )}
+      >
         {editor}
       </div>
     </div>

src/components/databrowser/components/display/display-simple.tsx

@@ -63,7 +63,7 @@ const EditorDisplayForm = ({
           {type === "json" ? <div /> : selector}
         </div>
 
-        <div className="grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
+        <div className="grow rounded-md border border-zinc-300 bg-white p-2">{editor}</div>
       </div>
 
       <div className="flex shrink-0 items-center gap-2">

src/components/databrowser/components/display/input/custom-editor.tsx

@@ -74,7 +74,7 @@ export const CustomEditor = ({
 
   return (
     <div
-      className={cn("group/editor relative", height === undefined && "h-full p-2")}
+      className={cn("group/editor relative", height === undefined && "h-full")}
       style={{ height: height }}
     >
       {isTest ? (