Merged
Conversation
Implement comprehensive mobile navigation and responsive design: **Mobile Navigation (< 768px):** - Add hamburger menu buttons in header for toggling sidebars - Sidebars overlay content instead of pushing it - Dark backdrop when sidebars are open - Smooth slide-in/out transitions - Auto-close sidebars when backdrop is clicked **Responsive Components:** - ChatHeader: Compact layout, responsive padding, mobile toggle buttons - ChatSidebar: Full-width overlay on mobile (288px-320px) - RightSidebar: Full-width overlay on mobile, disable resize - MessageInput: Responsive padding, icon-only buttons, smaller controls - Scroll buttons: Adjusted position for mobile **Desktop (>= 768px):** - Maintain existing static sidebar behavior - Keep resizable right sidebar - Show full button labels and larger controls All changes use Tailwind responsive breakpoints (sm:, md:) for seamless mobile-to-desktop experience.
Add mobile detection on initial mount to automatically collapse both sidebars when viewport width < 768px (md breakpoint). **Changes:** - Detect mobile viewport on component mount - Auto-collapse left and right sidebars if on mobile device - Track window resize for responsive behavior - Use ref to ensure auto-collapse only happens once on mount This ensures mobile users start with a clean, full-width view without sidebars obscuring the main chat interface. Users can still toggle sidebars using hamburger menu buttons as needed.
Fix tool dropdown visibility issues on mobile devices: **Tools Dropdown:** - Change from absolute to fixed positioning on mobile - Full width on mobile (left-2 right-2) with proper margins - Position at bottom of screen (bottom-20) to avoid overlap - Add max-height constraint (60vh) for scrollability on mobile - Maintain original 420px width and positioning on desktop (sm:) **Attach Dropdown:** - Slightly larger width on desktop (sm:w-56) for better touch targets - Maintain 192px (w-48) on mobile for better fit The tool dropdown now: - Displays properly centered on mobile screens - Doesn't overflow viewport boundaries - Provides adequate scrolling for long tool lists - Maintains desktop behavior unchanged
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
2 participants
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.
No description provided.