search

aws-samples / bedrock-claude-chat

AWS-native chatbot using Bedrock + Claude (+Mistral)
MIT No Attribution
784 stars 284 forks source link

Fix page height on mobile devices #181

Closed alandao closed 5 months ago

alandao commented 5 months ago

Issue #, if available:

Description of changes: Was getting frustrated that I'd have to manually scroll down to see the chat input area on my phone... This should fix it!

h-screen/min-h-screen extend below the address bar on iOS Safari (at least on my iPhone 13 pro). h-dvh and min-h-dvh fix this. min-h-dvh is required on the element since the default styling is "min-height: 100vh".

This article explains it better than I do: https://ishadeed.com/article/new-viewport-units/

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

alandao commented 5 months ago

Forgot to add that tailwindcss needs to be updated for this to work. Updated this PR with the latest version of it.