CSS issue on mobile screen

This is my page for my project, when I deploy it and run on my phone, the bottom part where the input area is goes out of screen and this can be replicated on desktop by changing the zoom. I tried many things as I thought its an issue of height for this div or parent div but I am not able to fix it. Whenever I change the zoom, the area goes below the visible area and I cant scroll to it. My desktop is big so the zoom is around 150-200% but on smaller screens its not visible even on 100% of certain mobile devices
Screenshot_2025-11-27_at_3.53.01_PM.png
Screenshot_2025-11-27_at_3.53.06_PM.png
Screenshot_2025-11-27_at_3.53.12_PM.png
Screenshot_2025-11-27_at_3.53.31_PM.png
Screenshot_2025-11-27_at_3.53.35_PM.png
Screenshot_2025-11-27_at_3.53.38_PM.png
Screenshot_2025-11-27_at_3.53.46_PM.png
Screenshot_2025-11-27_at_3.53.52_PM.png
Was this page helpful?