feat: Add responsive chat header options menu for small screens#55
Merged
Conversation
- Add options menu button (3-dot vertical) for screens < md breakpoint - Group perspective, media gallery, bookmarks, and stats into dropdown menu - Keep locale switcher and theme toggle always visible - Maintain individual buttons on large screens (>= md breakpoint) - Improve mobile UX by reducing header button clutter
- Switch dropdown content instead of opening second dropdown - Keep options menu open while showing perspective selector - Reset perspective search on menu close - Smoother UX without menu reopening required
There was a problem hiding this comment.
Pull request overview
This PR enhances the mobile user experience by introducing a responsive options menu in the chat header. On small screens (< 768px), four action buttons are consolidated into a 3-dot dropdown menu, while on large screens (>= 768px), the original individual button layout is preserved.
Key Changes
- Added a responsive options menu for mobile devices that uses a content-switching pattern for the perspective selector
- Consolidated four action buttons (Perspective, Media Gallery, Bookmarks, Statistics) into a dropdown on small screens
- Maintained backward compatibility with large screen layouts
Owner
Author
|
@copilot open a new pull request to apply changes based on the comments in this thread |
Contributor
|
@rodrigogs I've opened a new pull request, #56, to work on those changes. Once the pull request is ready, I'll request review from you. |
…et (#56) * Initial plan * refactor: extract duplicated perspective selector UI into reusable snippet Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rodrigogs <2362425+rodrigogs@users.noreply.github.com>
- Extract duplicate perspective selector UI into reusable snippet - Close chat options menu after selecting a perspective - Reduce code duplication from 2 instances to 1 snippet - Improve consistency and maintainability Addresses Copilot PR review comments
- Remove duplicate perspectiveSelectorContent snippet - Keep only the top-level snippet declaration - Fix build error: Identifier already declared
Contributor
|
🎉 This PR is included in version 1.26.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
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
This PR adds a responsive options menu to the chat header that improves the mobile experience by consolidating action buttons on small screens.
What Changed
Small screens (< 768px):
Large screens (>= 768px):
How It Works
Benefits
✅ Cleaner mobile UI - Reduces header button clutter on small devices
✅ Consistent patterns - Uses same dropdown components as MediaGallery options
✅ No functionality lost - All features remain accessible
✅ Smooth UX - Single-tap interaction, no menu reopening needed
Testing
Screenshots
Note: Test on mobile viewport or resize browser to < 768px to see the options menu.
Closes #[issue-number] (if applicable)