fix(web-shell): constrain responsive sidebar drawer

Author: dreamWB

docs/developers/daemon-ui/sidebar-customization.md

@@ -288,15 +288,19 @@ These `WebShellProps` affect sidebar behavior indirectly:
 
 ## Collapsed and mobile states
 
-| State     | Behavior                                           |
-| --------- | -------------------------------------------------- |
-| Expanded  | Full sidebar with text labels                      |
-| Collapsed | Icon-rail mode (logo, pen icon, action icons only) |
-| Mobile    | Drawer slides from left with backdrop overlay      |
+| State     | Behavior                                                                                       |
+| --------- | ---------------------------------------------------------------------------------------------- |
+| Expanded  | Full sidebar with text labels                                                                  |
+| Collapsed | Icon-rail mode (logo, pen icon, action icons only)                                             |
+| Mobile    | Drawer uses 70% of its container, within width limits, with backdrop and footer close controls |
 
 Collapse state is persisted in `localStorage` under the key
 `qwen-code-web-shell-sidebar-collapsed`.
 
+The resized desktop width is restored only in expanded layouts. Opening or
+closing the mobile drawer does not overwrite that width or the persisted
+desktop collapse preference.
+
 ## Source locations
 
 | Component           | File                                                                      |

packages/web-shell/client/App.module.css

@@ -347,6 +347,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     bottom: 0;
     z-index: 50;
     pointer-events: none;

packages/web-shell/client/App.test.tsx

@@ -1026,6 +1026,7 @@ vi.mock('./components/sidebar/WebShellSidebar', async () => {
       onOpenDaemonStatus?: () => void;
       onOpenSessions?: () => void;
       onOpenSplitView?: () => void;
+      onMobileClose?: () => void;
       onNewSession?: () => Promise<boolean> | boolean;
       onLoadSession?: (sessionId: string) => Promise<void> | void;
       onOpenAddWorkspace?: () => void;
@@ -1110,6 +1111,15 @@ vi.mock('./components/sidebar/WebShellSidebar', async () => {
           },
           'split view',
         ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'close-mobile-sidebar',
+            type: 'button',
+            onClick: props.onMobileClose,
+          },
+          'close mobile sidebar',
+        ),
       );
     },
   };
@@ -17984,6 +17994,36 @@ describe('App session callbacks', () => {
     expect(drawer?.className).toContain('mobileDrawerForced');
   });
 
+  it('closes the forced compact drawer from the sidebar control', async () => {
+    const shellRef = createRef<WebShellApi>();
+    const { container } = renderApp({ sidebar: true, shellRef });
+    await flush();
+
+    await act(async () => {
+      shellRef.current?.openSessionDrawer();
+      await Promise.resolve();
+    });
+    expect(
+      container.querySelector('[data-sidebar-shell][role="dialog"]'),
+    ).not.toBeNull();
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          '[data-testid="close-mobile-sidebar"]',
+        )
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(
+      container.querySelector('[data-sidebar-shell][role="dialog"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector('[data-sidebar-shell]')?.className,
+    ).not.toContain('mobileDrawerForced');
+  });
+
   it('does not open or lock scrolling when the sidebar is disabled', async () => {
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = 'auto';

packages/web-shell/client/App.tsx

@@ -12200,6 +12200,7 @@ export function App({
                   onSessionRenameConfirmed={reconcileCatalogRename}
                   onError={reportError}
                   mobileOpen={mobileDrawerOpen}
+                  onMobileClose={closeMobileDrawer}
                   selectedWorkspaceCwd={selectedWorkspaceCwd}
                   onSelectWorkspace={setSelectedWorkspaceCwd}
                   onOpenGitDiff={(workspaceCwd) =>

packages/web-shell/client/components/sidebar/WebShellSidebar.collapse-persist.test.tsx

@@ -222,14 +222,18 @@ function renderSidebar(
   collapsed = false,
   props: {
     onSelectCurrentSession?: () => void;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    mobileOpen?: boolean;
+    onMobileClose?: () => void;
+    footer?: false;
     sessionActions?: WebShellSidebarSessionActionsOptions;
     strict?: boolean;
   } = {},
 ) {
   const sidebar = (
     <WebShellSidebar
       collapsed={collapsed}
-      onCollapsedChange={() => {}}
+      onCollapsedChange={props.onCollapsedChange ?? (() => {})}
       onOpenSettings={() => {}}
       onOpenDaemonStatus={() => {}}
       onOpenScheduledTasks={() => {}}
@@ -239,6 +243,9 @@ function renderSidebar(
       onNewSession={() => false}
       onLoadSession={loadSession}
       onSelectCurrentSession={props.onSelectCurrentSession}
+      mobileOpen={props.mobileOpen}
+      onMobileClose={props.onMobileClose}
+      footer={props.footer}
       onError={() => {}}
       sessionActions={props.sessionActions}
     />
@@ -318,6 +325,39 @@ afterEach(() => {
 });
 
 describe('WebShellSidebar collapsed session group persistence', () => {
+  it('uses drawer constraints and closes mobile without persisting desktop collapse', async () => {
+    const onCollapsedChange = vi.fn();
+    const onMobileClose = vi.fn();
+    renderSidebar(false, {
+      mobileOpen: true,
+      onMobileClose,
+      onCollapsedChange,
+      footer: false,
+    });
+    await flushSidebar();
+
+    const sidebar = container.querySelector<HTMLElement>('aside');
+    expect(sidebar?.className).toContain(sidebarStyles.mobileOpen);
+    expect(
+      sidebar?.style.getPropertyValue('--web-shell-sidebar-min-width'),
+    ).toBe('220px');
+    expect(
+      sidebar?.style.getPropertyValue('--web-shell-sidebar-max-width'),
+    ).toBe('512px');
+
+    const close = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Collapse"]',
+    );
+    expect(close).not.toBeNull();
+    click(close!);
+
+    expect(onMobileClose).toHaveBeenCalledOnce();
+    expect(onCollapsedChange).not.toHaveBeenCalled();
+    expect(
+      window.localStorage.getItem('qwen-code-web-shell-sidebar-collapsed'),
+    ).toBeNull();
+  });
+
   it('includes secondary workspace attention without querying the primary workspace', async () => {
     const multiWorkspaceCapabilities = {
       ...organizationCapabilities,

packages/web-shell/client/components/sidebar/WebShellSidebar.module.css

@@ -27,6 +27,19 @@
   align-items: center;
 }
 
+.sidebar.mobileOpen {
+  width: clamp(
+    var(--web-shell-sidebar-min-width, 220px),
+    70%,
+    var(--web-shell-sidebar-max-width, 420px)
+  );
+  min-width: clamp(
+    var(--web-shell-sidebar-min-width, 220px),
+    70%,
+    var(--web-shell-sidebar-max-width, 420px)
+  );
+}
+
 .newChatButton,
 .pluginButton,
 .footerButton,
@@ -1799,9 +1812,6 @@
   .sidebar.mobileOpen {
     display: flex;
     z-index: 50;
-    /* The width var is shared with the desktop resize handle and can be wider
-       than a phone viewport; cap it so the drawer never overflows the screen. */
-    max-width: 100vw;
   }
 
   .resizeHandle {

packages/web-shell/client/components/sidebar/WebShellSidebar.tsx

@@ -371,6 +371,7 @@ interface WebShellSidebarProps {
   theme: WebShellTheme;
   onThemeChange: (theme: WebShellTheme) => void;
   mobileOpen?: boolean;
+  onMobileClose?: () => void;
   /**
    * Phase 4: workspace cwd picked for the next new session (undefined =
    * primary). Only meaningful on multi-workspace daemons.
@@ -833,6 +834,7 @@ export function WebShellSidebar({
   theme,
   onThemeChange,
   mobileOpen,
+  onMobileClose,
   selectedWorkspaceCwd,
   onSelectWorkspace,
   onOpenGitDiff,
@@ -1832,6 +1834,8 @@ export function WebShellSidebar({
   const footerTight = !collapsed && sidebarWidth < SIDEBAR_FOOTER_TIGHT_WIDTH;
   const sidebarStyle = {
     '--web-shell-sidebar-width': `${sidebarWidth}px`,
+    '--web-shell-sidebar-min-width': `${SIDEBAR_MIN_WIDTH}px`,
+    '--web-shell-sidebar-max-width': `${getSidebarMaxWidth()}px`,
   } as CSSProperties;
   const newSessionDisabled = creatingSession;
 
@@ -5471,7 +5475,7 @@ export function WebShellSidebar({
           </SidebarSessionSurface>
         </div>
 
-        {footer !== false && (
+        {(footer !== false || mobileOpen) && (
           <div
             className={cx(
               styles.footer,
@@ -5575,19 +5579,27 @@ export function WebShellSidebar({
                   <ActivityIcon size={16} strokeWidth={1.2} />
                 </button>
               )}
-              {!mobileOpen && footerItems.has('collapse') && (
+              {(mobileOpen || footerItems.has('collapse')) && (
                 <button
                   className={styles.collapseButton}
                   type="button"
                   title={
-                    collapsed ? t('sidebar.expand') : t('sidebar.collapse')
+                    mobileOpen || !collapsed
+                      ? t('sidebar.collapse')
+                      : t('sidebar.expand')
                   }
                   aria-label={
-                    collapsed ? t('sidebar.expand') : t('sidebar.collapse')
+                    mobileOpen || !collapsed
+                      ? t('sidebar.collapse')
+                      : t('sidebar.expand')
+                  }
+                  onClick={() =>
+                    mobileOpen
+                      ? onMobileClose?.()
+                      : onCollapsedChange(!collapsed)
                   }
-                  onClick={() => onCollapsedChange(!collapsed)}
                 >
-                  {collapsed ? (
+                  {collapsed && !mobileOpen ? (
                     <PanelLeftOpenIcon size={16} strokeWidth={1.2} />
                   ) : (
                     <PanelLeftCloseIcon size={16} strokeWidth={1.2} />

packages/web-shell/client/e2e/web-shell.composer.mobile.spec.ts

@@ -27,6 +27,7 @@ import {
 } from './utils/emptyMobileComposer';
 
 const COMPOSER_TEXTAREA = 'textarea[data-web-shell-composer-editor]';
+const SIDEBAR_WIDTH_STORAGE_KEY = 'qwen-code-web-shell-sidebar-width';
 
 test('renders the textarea backend instead of CodeMirror on touch devices', async ({
   page,
@@ -102,6 +103,50 @@ test('keeps voice controls reachable on an extra-narrow touch viewport', async (
   await expect(activeToolbar.locator('button:visible')).toHaveCount(2);
 });
 
+test('keeps a persisted wide sidebar inside the mobile drawer and exposes close', async ({
+  page,
+}, testInfo) => {
+  await page.addInitScript(
+    ([key, width]) => {
+      window.localStorage.setItem(key, width);
+    },
+    [SIDEBAR_WIDTH_STORAGE_KEY, '512'] as const,
+  );
+  const scenario = createWebShellDaemonScenario();
+  const daemon = await installScenario(page, scenario, testInfo);
+
+  await gotoSession(page, scenario, daemon);
+  await page.getByRole('button', { name: 'Toggle menu' }).tap();
+
+  const drawer = page.getByRole('dialog', { name: 'Workspace sidebar' });
+  const sidebar = page.getByRole('complementary', {
+    name: 'Workspace sidebar',
+  });
+  await expect(drawer).toBeVisible();
+  await expect(sidebar).toBeVisible();
+  const { drawerWidth, sidebarWidth } = await sidebar.evaluate((element) => ({
+    drawerWidth: element.parentElement?.getBoundingClientRect().width ?? 0,
+    sidebarWidth: element.getBoundingClientRect().width,
+  }));
+  expect(sidebarWidth).toBeCloseTo(drawerWidth * 0.7, 0);
+  expect(sidebarWidth).toBeLessThanOrEqual(drawerWidth);
+
+  await page.screenshot({
+    path: 'client/e2e/test-results/responsive-sidebar-drawer.png',
+    fullPage: true,
+  });
+  await page.getByRole('button', { name: 'Collapse' }).tap();
+  await expect(drawer).toBeHidden();
+  await expect
+    .poll(() =>
+      page.evaluate(
+        (key) => window.localStorage.getItem(key),
+        SIDEBAR_WIDTH_STORAGE_KEY,
+      ),
+    )
+    .toBe('512');
+});
+
 test('tap, type, and Send submit through the shared prompt pipeline', async ({
   page,
 }, testInfo) => {