Limit chat input height to 20 lines

[krassowski]

Fixes #796

Before	After	After (Firefox)

Why 20? Because in my testing I saw that:

• ChatGPT limits displayed lines to 20
• VSCode limits displayed lines to 10

I think it is better to go with a larger number. I am happy to change it to a different number based on review though :)

As to the visible scrollbar in Chrome:

• VSCode appears to hide scrollbars (which is not very accessible), ChatGPT shows it the same
• we could use scrollbar-width: thin or change the side of the scrollbar (here simulated with direction: rtl; text-align: left; trick, but it is not accessible; there is a clean solution but mui does not support it)

Chrome as-is	Chrome thin	Chrome flipped side

Alternatively we could move it to the right of the send button by reimplementing endAdornment as an element placed outside; this is trivial by making it position: absolute; right: 20px but would need some background to cover the text which might be underneath:

While covering some text might be annoying at times, this could be a good tradeoff as it would increase the width available for the user prompt.

[dlqqq]

@krassowski Thank you for opening this PR! I just pushed a commit that binds the "Send" button to the bottom of the chat input to prevent it from moving as a user types a long prompt. Avoiding excessive movement of UI elements is better for user experience, in my opinion.

Two questions:

1. Can you test this PR w/ my additional commit to ensure it works on your browsers as well?
2. Do you know why the scrollbar is not showing in Firefox, per your screenshot in the description of this PR?

[dlqqq]

Here is the UI I see locally after building my additional changes:

[krassowski]

Do you know why the scrollbar is not showing in Firefox, per your screenshot in the description of this PR?

The scrollbar is there, just only showing on hover. Firefox (at least on Ubuntu) uses so called overlay scrollbars. Chrome also uses them if user opt-in and on some OSes. There was a proposal to allow to change it via CSS but I think there was some opposition.

[krassowski]

Can you test this PR w/ my additional commit to ensure it works on your browsers as well?

Done, looks good to me!

[dlqqq]

@krassowski Awesome, thank you! Merging.