feat: Enhance mobile chat experience with responsive design and navigation
- Implement mobile-first design for the chat interface, optimizing touch interactions and navigation. - Introduce a peer list view that displays only peers until a selection is made, followed by a full-width chat view. - Add a back button for easy navigation and ensure touch-friendly elements for better usability. - Optimize message bubbles and avatars for mobile readability and visibility. - Update documentation to reflect new mobile-responsive features and navigation improvements.
This commit is contained in:
parent
37642ca48c
commit
87663d1d87
2 changed files with 162 additions and 13 deletions
|
|
@ -99,7 +99,17 @@ Response:
|
|||
- Message timestamps
|
||||
- Auto-scroll to latest messages
|
||||
|
||||
### 4. Navigation Features
|
||||
### 4. Mobile-Responsive Design
|
||||
- **Mobile-first approach**: Optimized for touch interactions
|
||||
- **Peer list view**: Shows only peers list on mobile until a peer is selected
|
||||
- **Full-width chat view**: When a peer is selected, switches to full-width chat
|
||||
- **Back button**: Easy navigation back to peers list
|
||||
- **Touch-friendly**: Larger touch targets and proper touch feedback
|
||||
- **Responsive avatars**: Larger avatars on mobile for better visibility
|
||||
- **Message bubbles**: Optimized width (75% max) for mobile readability
|
||||
- **Keyboard-friendly**: Input stays visible when keyboard appears
|
||||
|
||||
### 5. Navigation Features
|
||||
- Integrated into main navigation menu
|
||||
- Message icon for easy identification
|
||||
- Multi-language support
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue