MM-63965 - add scroll to advanced text editor (#30983)

* MM-63965 - add scroll to advanced text editor

* show scroll only when content wraps in more than one line

* fix unit test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
     rows={1}
     style={
       Object {
-        "overflowY": "auto",
+        "overflowY": "hidden",
       }
     }
   />

webapp/channels/src/components/autosize_textarea.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import type {ChangeEvent, FormEvent, HTMLProps} from 'react';
-import React, {useRef, useEffect, useCallback} from 'react';
+import React, {useRef, useEffect, useCallback, useState} from 'react';
 
 import type {Intersection} from '@mattermost/types/utilities';
 
@@ -43,6 +43,9 @@ const styles = {
         borderColor: 'transparent',
     },
     textArea: {
+        overflowY: 'hidden' as const,
+    },
+    textAreaWithScroll: {
         overflowY: 'auto' as const,
     },
 };
@@ -67,6 +70,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     const height = useRef(0);
     const textarea = useRef<HTMLTextAreaElement>();
     const referenceRef = useRef<HTMLDivElement>(null);
+    const [showScrollbar, setShowScrollbar] = useState(false);
 
     const recalculateHeight = () => {
         if (!referenceRef.current || !textarea.current) {
@@ -84,6 +88,9 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
 
             height.current = scrollHeight;
 
+            // Only show scrollbar if content height exceeds 44px
+            setShowScrollbar(scrollHeight > 44);
+
             onHeightChange?.(scrollHeight, parseInt(style.maxHeight || '0', 10));
         }
     };
@@ -158,7 +165,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
                 onInput={onInput}
                 value={value}
                 defaultValue={defaultValue}
-                style={styles.textArea}
+                style={showScrollbar ? styles.textAreaWithScroll : styles.textArea}
             />
             <div style={styles.container}>
                 <div

webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss

@@ -76,6 +76,10 @@
         .custom-textarea {
             border: none;
             box-shadow: none;
+
+            &.textbox-preview-area {
+                overflow-y: auto;
+            }
             
             &:focus {
                 box-shadow: none;