From ec89fc036dfd10457db169dd648448e6a0fdd763 Mon Sep 17 00:00:00 2001 From: Carl Harris Date: Thu, 11 Jun 2026 04:28:44 -0700 Subject: [PATCH] fix(user-settings): collapse sidebar to icon-only rail on mobile (#15678) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 | |---------|---------| | image | image | ## 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 --- web/src/pages/user-setting/index.tsx | 8 ++- web/src/pages/user-setting/sidebar/index.tsx | 54 +++++++++----------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/web/src/pages/user-setting/index.tsx b/web/src/pages/user-setting/index.tsx index 080ed3b8d1..beef40eb4f 100644 --- a/web/src/pages/user-setting/index.tsx +++ b/web/src/pages/user-setting/index.tsx @@ -5,10 +5,14 @@ import { cn } from '@/lib/utils'; const UserSetting = () => { return ( -
+
-
+
diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx index e093ce0203..33868e13d1 100644 --- a/web/src/pages/user-setting/sidebar/index.tsx +++ b/web/src/pages/user-setting/sidebar/index.tsx @@ -13,6 +13,7 @@ import { Routes } from '@/routes'; import { TFunction } from 'i18next'; import { LucideBox, + LucideLogOut, LucideServer, LucideUnplug, LucideUser, @@ -54,14 +55,6 @@ const menuItems = (t: TFunction) => [ label: t('setting.api'), key: Routes.Api, }, - // { - // icon: MessageSquareQuote, - // label: 'Prompt Templates', - // key: Routes.Profile, - // }, - // { icon: TextSearch, label: 'Retrieval Templates', key: Routes.Profile }, - // { icon: Cog, label: t('setting.system'), key: Routes.System }, - // { icon: Banknote, label: 'Plan', key: Routes.Plan }, ]; export function SideBar() { @@ -77,48 +70,43 @@ export function SideBar() { const { logout } = useLogout(); return ( -