From d2f38efc9e6e55c19c9c128dbaf3407ae090e130 Mon Sep 17 00:00:00 2001
From: Jesse Pavel <jpavel@alum.mit.edu>
Date: Tue, 4 Jun 2024 20:52:28 -0400
Subject: [PATCH] Resize textarea if screen height is small or changes

---
 css/guided-typing.css |  5 +++++
 js/guided-typing.mjs  | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/css/guided-typing.css b/css/guided-typing.css
index b940c70..2d4d9ba 100644
--- a/css/guided-typing.css
+++ b/css/guided-typing.css
@@ -245,6 +245,11 @@ display-keyboard {
   margin-bottom: 1em;
 }
 
+.input-holder {
+  margin: 0;
+  padding: 0;
+}
+
 .settings-icons-holder {
   position: fixed;
   right: 2px;
diff --git a/js/guided-typing.mjs b/js/guided-typing.mjs
index 2559bb9..31be0c3 100644
--- a/js/guided-typing.mjs
+++ b/js/guided-typing.mjs
@@ -277,6 +277,15 @@ function checkBrowserFeatures() {
     }
 }
 
+function sizeTextarea(sectionEl, textarea, keyboard) {
+    const ELEMENT_SPACING_HEIGHT = 25,  // height of padding and borders around elements
+          TEXTAREA_MIN_HEIGHT = 50;     // empirically, one comfortable line of text
+    const viewportHeight = document.documentElement.clientHeight;
+    const remainingHeight = viewportHeight - sectionEl.offsetHeight - keyboard.offsetHeight - ELEMENT_SPACING_HEIGHT;
+    const textareaHeight = Math.max(TEXTAREA_MIN_HEIGHT, Math.min(sectionEl.offsetHeight, remainingHeight));
+    textarea.style.height = `${textareaHeight}px`;
+}
+
 async function main() {
     checkBrowserFeatures();
 
@@ -337,7 +346,6 @@ async function main() {
         if (selected) {
             if (!nextEl || !nextEl.classList.contains("input-holder")) {
                 const textarea = document.createElement("textarea");
-                textarea.style.height = `${sectionEl.offsetHeight}px`;
                 // Use the first two words of the section text as a placeholder
                 const sectionText = sectionEl.innerText;
                 let breakIdx = sectionText.indexOf(' ');
@@ -363,6 +371,7 @@ async function main() {
                     if (textarea.nextElementSibling != keyboard)
                         textarea.after(keyboard);
                     sectionEl.scrollIntoView(true);
+                    sizeTextarea(sectionEl, textarea, keyboard);
                     processTextInput(textarea, expandedText, successCheck, keyboard);
                 });
                 textarea.addEventListener('input', ev => {
@@ -392,6 +401,13 @@ async function main() {
             }
         }
     });
+    window.addEventListener('resize', () => {
+        if (keyboard.parentElement) {
+            const textarea = keyboard.previousElementSibling;
+            const sectionEl = textarea.parentElement.previousElementSibling;
+            sizeTextarea(sectionEl, textarea, keyboard);
+        }
+    });
 }
 
 window.addEventListener('load', main());