🤖 fix: iPadOS PWA keyboard accessory bar layout shift #799
+46
−2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
On iPadOS 26 with external keyboard in PWA mode, Safari shows an input accessory bar (language switch, up/down arrows, microphone) that can cause layout shifts when focusing the chat input. Changes: - Add viewport-fit=cover to viewport meta for safe area inset support - Use 100dvh (dynamic viewport height) to account for browser chrome and keyboard bars, with 100vh fallback for older browsers - Add CSS env() safe-area-inset handling for notched devices - Add enterKeyHint="send" to textarea for better mobile keyboard UX - Add comprehensive comments explaining the iOS/iPadOS keyboard behavior The dvh unit automatically adjusts when the keyboard accessory bar appears/disappears, preventing the chat input from being pushed around. _Generated with `mux`_
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Addresses review feedback - viewport-fit=cover requires handling all four safe-area insets (top, bottom, left, right) to prevent content from being obscured by notches, home indicators, or screen edges.
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
On iPadOS 26 with external keyboard in PWA mode, Safari shows an input accessory bar (language switch, up/down arrows, microphone) that can cause layout shifts when focusing the chat input.
Changes:
viewport-fit=coverto viewport meta for safe area inset support100dvh(dynamic viewport height) to account for browser chrome and keyboard bars, with100vhfallback for older browsersenv()safe-area-inset handling for notched devicesenterKeyHint="send"to textarea for better mobile keyboard UXThe
dvhunit automatically adjusts when the keyboard accessory bar appears/disappears, preventing the chat input from being pushed around.Generated with
mux