fix: position the material text-area bottom bar

[tomivirkki]

Fixes #1333
Closes #3241

The fix is inspired by #1333 (comment)

There's now a private CSS variable named --_text-area-vertical-scroll-position which is kept in sync with the scrollTop of the input field. It's used for adjusting the position of the pseudo-elements used in MD for the bottom bar.

[web-padawan]

LGTM. When removing max-height set on the element, scrollbar does not go away automatically. This is an edge case so we can probably address it later (it will probably require using ResizeObserver).

scroll.mp4

.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[tomivirkki]

LGTM. When removing max-height set on the element, scrollbar does not go away automatically. This is an edge case so we can probably address it later (it will probably require using ResizeObserver).

Good catch. There was a unit test for resizing but this bug turned out to be theme-specific. Added ResizeMixin as suggested and now it works as expected.

[vaadin-bot]

Hi @tomivirkki , this commit cannot be picked to 22.0 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick a4ba585
error: could not apply a4ba585... fix: position the material text-area bottom bar (#3359)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add ' or 'git rm '
hint: and commit the result with 'git commit'

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.beta2 and is also targeting the upcoming stable 23.0.0 version.