feat: make the list edit forms full height

Author: ytkimirti

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

@@ -80,31 +80,22 @@ 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 === "zset" && <NumberFormItem name="value" label={valueLabel} />}
+
           {type !== "list" && (
+            <FormItem readOnly={type === "stream"} name="key" label={keyLabel} data={itemKey} />
+          )}
+
+          {type !== "set" && type !== "zset" && (
             <FormItem
               readOnly={type === "stream"}
-              name="key"
-              height={type === "set" ? 250 : 100}
-              label={keyLabel}
-              data={itemKey}
+              name="value"
+              label={valueLabel}
+              data={itemValue ?? ""}
             />
           )}
-
-          {type === "zset" ? (
-            <NumberFormItem name="value" label={valueLabel} />
-          ) : (
-            type !== "set" && (
-              <FormItem
-                readOnly={type === "stream"}
-                name="value"
-                height={type === "list" ? 250 : 100}
-                label={valueLabel}
-                data={itemValue ?? ""}
-              />
-            )
-          )}
         </div>
 
         <div
@@ -195,14 +186,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 ? (