Mobile chat keyboard optimization #2
Draft
+363
−34
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
- Enhanced keyboard detection hook to work across all mobile devices (iOS, Android) - Renamed useIOSKeyboard to useMobileKeyboard for broader device support - Added fallback for browsers without visualViewport API - Improved keyboard visibility detection with better thresholds - Added focus/blur event handlers for more reliable detection - Improved composer positioning to stay above keyboard reliably - Better transform calculations accounting for safe area insets - Smooth transitions when keyboard opens/closes - Prevents composer from being hidden behind keyboard - Optimized scrolling behavior when keyboard opens/closes - Auto-scroll to bottom when keyboard opens - Uses requestAnimationFrame for smooth DOM updates - Added bottom anchor scrolling for reliability - Prevents layout jumps and viewport shifts - Enhanced viewport height handling for mobile browsers - Uses 100dvh (dynamic viewport height) for better mobile support - Added fallbacks for browsers without dvh support - Fixed body scroll prevention when app is mounted - Better handling of safe area insets - Improved touch interactions and prevented unwanted zoom - Set minimum font-size to 16px to prevent iOS zoom on focus - Improved tap targets (minimum 44px) - Disabled tap highlight for cleaner interactions - Prevented pull-to-refresh on mobile - Added mobile-specific CSS optimizations - Hardware acceleration for smooth scrolling - Overscroll behavior containment - Better performance with will-change and backface-visibility - Responsive font sizes for inputs These changes ensure the chat interface works smoothly on any mobile device with proper keyboard handling, scrolling, and viewport management.
|
Cursor Agent can help with this pull request. Just |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
@cursor does this change the look and feel of the UI flows in any way? any arguments for not merging this in? |
|
❌ Unable to add follow-up after multiple attempts. The agent may be experiencing issues. Please try again later or Open in Web to view the status. Learn more about Cursor Agents |
- Changed pull-to-refresh prevention from global (body) to scroll-container only - Allows page-level pull-to-refresh to still work if needed - Only prevents pull-to-refresh within conversation scroll area - This is a common pattern for chat apps (Slack, Discord) - Removed duplicate fixed positioning on app container - Body already has fixed positioning on mobile - Prevents potential conflicts with dropdowns/modals - Made font-size override more targeted - Only applies to textarea (composer), not all inputs - Prevents iOS zoom while preserving other input styling - Added opt-out class for touch target sizing - Buttons can use .no-min-size to opt out if needed - Follows accessibility guidelines while maintaining flexibility
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Optimize mobile chat and keyboard mechanics for a robust and great UX on any page.
This PR addresses common mobile chat issues by improving keyboard detection across iOS and Android, ensuring the composer stays above the keyboard, enhancing scrolling behavior to auto-scroll to the bottom, and refining viewport handling with
100dvhand body scroll prevention. It also includes touch interaction improvements like minimum font sizes and tap targets, and performance optimizations for smoother scrolling.