I’ve built a React app that’s a simple blog where I can add/edit/delete posts. Stack is React with axios to make requests to a basic Firebase database.
It displays fine on desktop and tablet screen sizes. However, when viewing it on my phone, when I go to create a new post or edit an existing one, the virtual keyboard (Android/Chrome) takes up so much screen height that the bottom input is cut off.
I’m not sure how to approach this problem, but I don’t want the bottom input to be cut off by the virtual keyboard. I’ve thought about adding a media query for a small screen height to add a margin to the component that contains the inputs, but want to know if there’s a better approach.
The relevant component is Input and its nested components.