Allow dynamic editor max height to prevent UI overflow issues

web/components/comments/comment-input.tsx

@@ -134,6 +134,7 @@ export function CommentInputTextArea(props: {
   isDisabled?: boolean
   isEditing?: boolean
   commentTypes?: CommentType[]
+  maxHeight?: string
 }) {
   const {
     user,
@@ -146,6 +147,7 @@ export function CommentInputTextArea(props: {
     commentTypes = ['comment'],
     cancelEditing,
     isDisabled,
+    maxHeight,
   } = props
   const t = useT()
 
@@ -198,7 +200,7 @@ export function CommentInputTextArea(props: {
   }, [replyTo, editor])
 
   return (
-    <TextEditor editor={editor} simple hideEmbed>
+    <TextEditor editor={editor} maxHeight={maxHeight} simple hideEmbed>
       <Row className={''}>
         {user && !isSubmitting && submit && commentTypes.includes('repost') && (
           <Tooltip text={'Post question & comment to your followers'} className={'mt-2'}>

web/components/messaging/send-message-button.tsx

@@ -273,6 +273,7 @@ export const SendMessageButton = (props: {
                 isSubmitting={!editor || submitting}
                 isDisabled={charCount < MIN_CHARS}
                 submitOnEnter={false}
+                maxHeight={'25vh'} // otherwise send button gets hidden (need better fix)
               />
 
               <p className="text-ink-500 text-xs text-center leading-relaxed">

web/components/widgets/editor.tsx

@@ -221,8 +221,9 @@ export function TextEditor(props: {
   className?: string
   onBlur?: () => void
   onChange?: () => void
+  maxHeight?: string
 }) {
-  const {editor, simple, hideEmbed, children, className, onBlur, onChange} = props
+  const {editor, simple, hideEmbed, children, className, onBlur, onChange, maxHeight} = props
 
   return (
     // matches input styling
@@ -233,7 +234,7 @@ export function TextEditor(props: {
       )}
     >
       <FloatingFormatMenu editor={editor} advanced={!simple} />
-      <div className={clsx('max-h-[69vh] overflow-auto')}>
+      <div className={clsx(`overflow-auto`, maxHeight ? `max-h-[${maxHeight}]` : 'max-h-[69vh]')}>
         <EditorContent editor={editor} onBlur={onBlur} onChange={onChange} />
       </div>