feat: full height item editors (#33)

* feat: make the list edit forms full height

* test: fix tests not passing because of low viewport height

Author: ytkimirti

playwright.config.ts

@@ -31,15 +31,27 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+
+    /* Viewport height */
+    viewport: { width: 1280, height: 1280 },
   },
 
   /* Configure projects for major browsers */
   projects: [
-    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"], viewport: { width: 1280, height: 1500 } },
+    },
 
-    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"], viewport: { width: 1280, height: 1500 } },
+    },
 
-    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"], viewport: { width: 1280, height: 1500 } },
+    },
 
     /* Test against mobile viewports. */
     // {

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,9 +63,7 @@ const EditorDisplayForm = ({
           {type === "json" ? <div /> : selector}
         </div>
 
-        <div className="grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]">
-          {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

@@ -79,7 +79,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 ? (