mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-06-29 23:41:12 +08:00
ec89fc036d
## Summary Improves the responsiveness of the User Settings layout by converting the left navigation sidebar into a compact icon-only rail on mobile devices. Previously, the sidebar retained its full desktop width on narrow viewports, reducing the available space for settings content and making pages such as **Data Sources** difficult to use on phones and smaller tablets. With this change: - Desktop layouts retain the existing full sidebar experience - Mobile layouts (<768px) display a compact 64px icon-only navigation rail - Main content receives significantly more horizontal space - Navigation and logout actions remain fully accessible on mobile ## Type of Change - [x] Bug fix ## Screenshots | Before | After | |---------|---------| | <img width="557" height="760" alt="image" src="https://github.com/user-attachments/assets/fb0d6a90-2d57-464c-90c6-9097418c7c13" /> | <img width="557" height="760" alt="image" src="https://github.com/user-attachments/assets/8db36d0f-7070-41e1-b7b2-0fe9d0cceefb" /> | ## What Changed ### Mobile Sidebar Optimization - Added responsive mobile behavior using `useIsMobile()` - Displays avatar and navigation icons only on mobile - Hides user email, navigation labels, version information, theme switcher, and logout text on smaller screens - Preserves navigation and logout functionality through icon actions ### Layout Improvements - Updated settings page grid layout to use fixed sidebar widths: - Mobile: `4rem` (64px) - Desktop: `303px` - Uses `minmax(0, 1fr)` for the content panel to prevent overflow and allow proper shrinking - Prevents sidebar width from expanding based on content ## Impact - Improves usability of User Settings pages on phones and small tablets - Increases available space for settings content - Reduces horizontal crowding and overflow issues - Maintains the existing desktop experience ## Test Plan ### Desktop (≥768px) - Verify the full sidebar is displayed - Confirm email, navigation labels, version information, theme switch, and logout text are visible - Ensure all navigation items function correctly ### Mobile (<768px) - Verify the sidebar collapses to a 64px icon-only rail - Confirm main content remains readable without horizontal crowding - Verify navigation icons route correctly: - Data Sources - Model Providers - MCP - Team - Profile - API - Confirm logout works from the icon button ### Verification - Run `npm run build` - Hard refresh when testing production or Docker deployments - Verify responsive behavior using browser device emulation
Install front-end dependencies
npm install
Launch front-end
npm run dev
The following output confirms a successful launch of the system:
Login to RAGFlow web UI
Open your browser and navigate to:
http://localhost:9222 or http://[YOUR_MACHINE_IP]:9222
Replace [YOUR_MACHINE_IP] with your actual machine IP address (e.g., http://192.168.1.49:9222).
Login to RAGFlow web admin UI
Open your browser and navigate to:
http://localhost:9222/admin or http://[YOUR_MACHINE_IP]:9222/admin
Replace [YOUR_MACHINE_IP] with your actual machine IP address (e.g., http://192.168.1.49:9222/admin).
Shutdown front-end
Ctrl + C or
kill -f "umi dev"