From 18307b2e0363a0451767fa4320768a30246550e5 Mon Sep 17 00:00:00 2001
From: Stela Augustinova <augustinovast@gmail.com>
Date: Fri, 19 Dec 2025 12:19:07 +0100
Subject: [PATCH] Refactor DbKeyItemDetail and DbKeyValueDetail for improved
 layout and editor responsiveness

---
 .../web/src/dbkeyvalue/DbKeyItemDetail.svelte |  4 +--
 .../src/dbkeyvalue/DbKeyValueDetail.svelte    | 25 +++++++++++++------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
index 9f1d224b8..577b81bbe 100644
--- a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
@@ -28,9 +28,9 @@
   .props {
     flex: 1;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: 10px;
     padding: 10px;
-    overflow: hidden;
+    overflow: auto;
   }
 </style>
diff --git a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
index b7cc0798d..79ba6eaf4 100644
--- a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
@@ -31,14 +31,16 @@
 </div>
 <div class="colvalue">
   {#if display == 'text'}
-    <AceEditor
-      readOnly={!onChangeValue}
-      {value}
-      mode={keyType === 'JSON' ? 'json' : undefined}
-      on:input={e => {
-        onChangeValue?.(e.detail);
-      }}
-    />
+    <div class="editor-wrapper">
+      <AceEditor
+        readOnly={!onChangeValue}
+        {value}
+        mode={keyType === 'JSON' ? 'json' : undefined}
+        on:input={e => {
+          onChangeValue?.(e.detail);
+        }}
+      />
+    </div>
   {/if}
   {#if display == 'json'}
     <div class="outer">
@@ -66,6 +68,13 @@
     justify-content: space-between;
   }
 
+  .editor-wrapper {
+    flex: 1;
+    position: relative;
+    min-height: 60px;
+    max-height: 1000px;
+  }
+  
   .outer {
     flex: 1;
     position: relative;