From 77b8f646d966a1acbfe2303e779eb286879e1c9c Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Fri, 24 Oct 2025 12:31:39 +0300
Subject: [PATCH 1/2] feat: make the list edit forms full height

---
 .../components/display/display-list-edit.tsx  | 38 +++++++++----------
 .../components/display/display-simple.tsx     |  2 +-
 .../display/input/custom-editor.tsx           |  2 +-
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/databrowser/components/display/display-list-edit.tsx b/src/components/databrowser/components/display/display-list-edit.tsx
index d94ce4a..8bdbee6 100644
--- a/src/components/databrowser/components/display/display-list-edit.tsx
+++ b/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>
diff --git a/src/components/databrowser/components/display/display-simple.tsx b/src/components/databrowser/components/display/display-simple.tsx
index 9bbaff6..f8cc434 100644
--- a/src/components/databrowser/components/display/display-simple.tsx
+++ b/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">
diff --git a/src/components/databrowser/components/display/input/custom-editor.tsx b/src/components/databrowser/components/display/input/custom-editor.tsx
index 9bb4ea6..751b8b0 100644
--- a/src/components/databrowser/components/display/input/custom-editor.tsx
+++ b/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 ? (

From 86ba9c19657e9b1a4a89cd949d7ddc60b7eefe97 Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Fri, 24 Oct 2025 14:21:23 +0300
Subject: [PATCH 2/2] test: fix tests not passing because of low viewport
 height

---
 playwright.config.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 2f1f0cd..4880a90 100644
--- a/playwright.config.ts
+++ b/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. */
     // {