How to prevent virtual keyboard from pushing up entire chatbot?

As you can see once i click the text input it moves the entire page upwards on Safari, I’m trying to prevent this from happening and cannot find a solution.

I’m using react/next

I’d post relevant code if I knew what might be causing this issue but i’ve tried meta tags and setting min heights and setting UseEffects to account for the page height and nothing has really worked thus far

One cool solution that I’m aware of is to monitor changes in the viewport and then check if the textarea/input is focused. In this condition, you might want to change class and have different css rules apply.

1 Like

I’ll try this and report back. Thank you