[BUG]: Chat input - long text not scrollable due to <pre> overlay #1316
Description
Describe the bug
When typing a long paragraph in the chat input, the scroll bar does not work. This happens because the <textarea> content is transparent, and a pre tag is rendered above it (with pointer-events: none). Since the pre handles the text rendering, the scrollbar for the <textarea> becomes unusable.
Steps to reproduce the behavior:
Go to the chat input component.
Type or paste a long paragraph so that the input should become scrollable.
Try scrolling the input area.
Notice that the scrollbar does not work and text overlap.
Expected behavior
The chat input should become scrollable when the content exceeds the visible area, allowing the user to see all typed text.
Screenshots
Additional context
The issue arises because the pre element is placed above the textarea for styled text display. Even though it's parent has pointer-events: none, it still prevents the native scrolling behavior of the textarea.