Fix page height on mobile devices #181
Conversation
Was geting frustrated that I'd have to manually scroll down to see the chat input on my phone... This should fix it!
|
Forgot to add that tailwindcss needs to be updated for this to work. Updated this PR with the latest version of it. |
| @@ -57,14 +57,14 @@ const App: React.FC = () => { | |||
| ), | |||
| }}> | |||
| {({ signOut }) => ( | |||
| <div className="relative flex h-screen w-screen bg-aws-paper"> | |||
| <div className="relative flex h-dvh w-screen bg-aws-paper"> | |||
There was a problem hiding this comment.
I get the following error with eslint-plugin-tailwindcss
Please upgrade eslint-plugin-tailwindcss to v3.14.0 or higher
https://github.com/francoismassart/eslint-plugin-tailwindcss/releases/tag/v3.14.0
There was a problem hiding this comment.
Is this on VSCode? I installed ESLint and Tailwind CSS IntelliSense extensions and can't reproduce. This is after I ran npm ci. Is there any setup I'm missing here?
alandao@Alans-MacBook-Air ~/P/b/frontend (main)> npm run lint
> [email protected] lint
> eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0
/Users/alandao/Projects/bedrock-claude-chat/frontend/src/components/DialogConfirmClearConversations.tsx
34:11 warning Classname 'bg-red-500' is not a Tailwind CSS class! tailwindcss/no-custom-classname
/Users/alandao/Projects/bedrock-claude-chat/frontend/src/components/LazyOutputText.tsx
31:5 error Unused eslint-disable directive (no problems were reported from 'react-hooks/exhaustive-deps')
/Users/alandao/Projects/bedrock-claude-chat/frontend/src/hooks/useHttp.ts
37:1 error Unused eslint-disable directive (no problems were reported from '@typescript-eslint/no-explicit-any')
/Users/alandao/Projects/bedrock-claude-chat/frontend/src/hooks/useScroll.ts
24:5 error Unused eslint-disable directive (no problems were reported from 'react-hooks/exhaustive-deps')
/Users/alandao/Projects/bedrock-claude-chat/frontend/src/i18n/fr/index.ts
84:451 error Irregular whitespace not allowed no-irregular-whitespace
96:39 error Irregular whitespace not allowed no-irregular-whitespace
✖ 6 problems (5 errors, 1 warning)
3 errors and 0 warnings potentially fixable with the `--fix` option.
alandao@Alans-MacBook-Air ~/P/b/frontend (main) [1]>
There was a problem hiding this comment.
Yes, I'm using VSCode.
Although I don't know the exact cause, after restarting and updating VSCode, the error message Classname 'h-dvh' is not a Tailwind CSS class! disappeared.
When I run npm run lint, the above error is also not occurring, so this issue has been resolved.
I will merge this PR as well. Thank you for your contribution!
As for your error, it seems that the tailwind.config.js file is not being recognized by the extension.
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.