From 4b48d19603afb5a03bbb5c98f6d20740c2cbe0b1 Mon Sep 17 00:00:00 2001
From: Arislan <91715569+qutluq@users.noreply.github.com>
Date: Fri, 13 Feb 2026 12:32:04 +0500
Subject: [PATCH] style: make texteditor height fit json editor and do not
 cause overflow

Adjust the height of the text area based on the editor container's height, with padding. This will stop text editor from oveflow in json editor and moving comfirm buttons out of sight.
---
 src/AutogrowTextArea.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/AutogrowTextArea.tsx b/src/AutogrowTextArea.tsx
index a6828e6..7c6f19f 100644
--- a/src/AutogrowTextArea.tsx
+++ b/src/AutogrowTextArea.tsx
@@ -34,13 +34,17 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
   if (typeof value !== 'string') return null
   const dummyValue = value.slice(-1) === '\n' ? value + '.' : value
 
+  // The height of the text-area is determined by the height of the editor container, minus some padding to prevent it from being too tall.
+  const height = document?.getElementsByClassName('jer-editor-container')?.[0].clientHeight
+  const heightString = height ? `${height - 100}px` : 'auto'
+
   return (
-    <div style={{ display: 'grid' }}>
+    <div style={{ display: 'grid', width: '100%' }}>
       <textarea
         id={`${name}_textarea`}
         ref={textAreaRef}
         style={{
-          height: 'auto',
+          height: heightString,
           gridArea: '1 / 1 / 2 / 2',
           overflowY: 'auto',
           whiteSpace: 'pre-wrap',
@@ -64,7 +68,7 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
         style={{
           visibility: 'hidden',
           // visibility: 'visible',
-          height: 'auto',
+          height: heightString,
           gridArea: '1 / 1 / 2 / 2',
           color: 'red',
           opacity: 0.9,