fix: textarea was being cutoff

marespopa · Oct 1, 2024 · 3f898f2 · 3f898f2
1 parent fcc0054
commit 3f898f2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/client/components/common/FullscreenModal/FullscreenModal.tsx b/client/components/common/FullscreenModal/FullscreenModal.tsx
@@ -28,7 +28,7 @@ function FullscreenModal({ isOpen, children, onModalClose }: Props) {
     >
       <div className="pointer-events-none relative w-auto transition-all duration-300 ease-in-out min-[0px]:m-0 min-[0px]:h-full min-[0px]:max-w-none">
         <div className="pointer-events-auto relative flex w-full flex-col rounded-md bg-white dark:bg-slate-700 bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark min-[0px]:h-full min-[0px]:rounded-none min-[0px]:border-0">
-          <div className="relative p-4">
+          <div className="relative p-4 overflow-y-auto">
             {children}
           </div>
 

diff --git a/client/components/forms/input/Textarea/Textarea.component.tsx b/client/components/forms/input/Textarea/Textarea.component.tsx
@@ -65,7 +65,7 @@ const inputStyle = `bg-gray-100 block px-2.5 pb-2.5 pt-6 w-full text-sm text-gra
                     focus:outline-none focus:ring-0 focus:border-gray-800
                     peer disabled:opacity-25 disabled:cursor-none resize-none
                     transition-height duration-400 ease-in-out
-                    dark:bg-gray-800 dark:text-white dark:border-gray-700`
+                    dark:bg-gray-800 dark:text-white dark:border-gray-700 max-h-[100vh]`
 
 const labelStyles = `bg-gray-100 dark:bg-gray-800 absolute text-sm text-gray-500 duration-400 transform
                      -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-gray-400

diff --git a/client/hooks/use-autoresize.tsx b/client/hooks/use-autoresize.tsx
@@ -1,7 +1,7 @@
 import { RefObject } from 'react'
 import useIsomorphicLayoutEffect from './use-isomorphic-layout-effect'
 
-const MIN_HEIGHT = 150 //px
+const MIN_HEIGHT = 400 //px
 
 // Updates the height of a <textarea> when the value changes.
 const useAutoResizeTextArea = (
@@ -15,7 +15,10 @@ const useAutoResizeTextArea = (
   }, [textAreaRef, value])
 
   function resize(textAreaRef: HTMLTextAreaElement) {
-    if (textAreaRef.scrollHeight > MIN_HEIGHT) {
+    textAreaRef.style.height = "";
+    textAreaRef.style.height = textAreaRef.scrollHeight + 4 + "px";
+
+    if (textAreaRef.scrollHeight < MIN_HEIGHT) {
       textAreaRef.style.height = `${textAreaRef.scrollHeight}px`
     }
   }