fix: use full-screen drawer for GIF picker on mobile #5253
Merged
+162
−75
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 mobile, the keyboard opening caused the Radix popover to shift off-screen due to viewport changes. Switching to a full-screen drawer on mobile (< tablet breakpoint) allows the keyboard to be handled naturally while keeping the GIF picker visible and usable. Desktop/tablet views continue using the popover. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Add type="button" to the mobile GIF button to prevent it from submitting the parent form when clicked. Buttons default to type="submit" inside forms, and on desktop Radix's PopoverTrigger handles this, but on mobile the button is rendered directly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
After selecting a GIF on mobile, blur the textarea to dismiss the keyboard. This prevents accidental form submission when the user taps the keyboard's "Go"/"Submit" button to dismiss the keyboard. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
This reverts commit bcbe738.
Add onKeyDown handler to the GIF search TextField that prevents Enter key from propagating to the parent form. This stops the mobile keyboard's "Go" button from submitting the comment form when the user is searching for GIFs. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
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.
Changes
GifPickerContentcomponent for code reuseEvents
No new tracking events introduced.
Experiment
No new experiments introduced.
Manual Testing
On those affected packages:
Did you test the modified components media queries?
Did you test on actual mobile devices?
Preview domain
https://amardailydev-gif-popover-mobile.preview.app.daily.dev