From 249928a6c4f50bada12ec014a93e16128cf44a86 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Mon, 6 Feb 2023 04:29:35 +0200
Subject: [PATCH] fix issue with textarea

---
 javascript/ui.js | 16 +++++++++++-----
 style.css        | 40 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index faf74174..86eb32c4 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -293,18 +293,24 @@ onUiUpdate(function(){
     })
 	
 	/* resizable textarea */
-	gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function(elem){
-        elem.classList.add("input-text");
-		elem.classList.remove("gr-text-input", "gr-box");	
-    })
+	gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function (elem) {
+		elem.style.boxSizing = 'border-box';
+		var offset = elem.offsetHeight - elem.clientHeight;
+		elem.addEventListener('input', function (e) {
+			e.target.style.minHeight = 'auto';
+			e.target.style.minHeight = e.target.scrollHeight + offset + 'px';
+		});
+	});
+	
 	
 	
 	/* split view resize */
-
 	gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => {
 		
 		elem.addEventListener("mousedown", function(e) {	
 
+			e.preventDefault();
+			
 			let resizer = e.currentTarget;
 			let leftSide = resizer.previousElementSibling;
 			let rightSide = resizer.nextElementSibling;
diff --git a/style.css b/style.css
index a269fe76..a0ea332b 100644
--- a/style.css
+++ b/style.css
@@ -1822,10 +1822,17 @@ input:focus {
     border-radius: 0 !important;
 }
 
-#img2img_neg_prompt label, #img2img_prompt label, #txt2img_neg_prompt label, #txt2img_prompt label {
+#img2img_neg_prompt label, 
+#img2img_prompt label, 
+#txt2img_neg_prompt label, 
+#txt2img_prompt label {
 	border: 0;
 }
-#img2img_neg_prompt span, #img2img_prompt span, #txt2img_neg_prompt span, #txt2img_prompt span {
+
+#img2img_neg_prompt span, 
+#img2img_prompt span, 
+#txt2img_neg_prompt span, 
+#txt2img_prompt span {
     border-bottom: 0 !important;
 }
 
@@ -1835,12 +1842,35 @@ input:focus {
 #txt2img_neg_prompt textarea
 {
 	min-height: 37px;
-	overflow: hidden !important;	
+	/*overflow: hidden !important;	*/
 }
 
-#txt2img_results::after{
-	
+/*
+#txt2img_prompt label {
+  display: grid;
 }
+#txt2img_prompt label::after {
+  content: attr(data-replicated-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+#txt2img_prompt label > textarea {
+  resize: none;
+  overflow: hidden;
+}
+#txt2img_prompt label > textarea,
+#txt2img_prompt label::after {
+ 
+  border: 1px solid black;
+  padding: 0.5rem;
+  font: inherit;
+  grid-area: 1 / 1 / 2 / 2;
+}
+*/
+
+
+
+
 
 pre {
  white-space: pre-wrap;       /* css-3 */