From b69a89b8a08ba5bd848ae97270d753d808195fff Mon Sep 17 00:00:00 2001
From: chihumyum <yang@chihum.dev>
Date: Sat, 22 Aug 2026 03:09:17 +0800
Subject: [PATCH] fix(desktop): let the whole Settings pane scroll

Move vertical scroll ownership from the centered content column to the rounded Settings main pane so wide gutters accept wheel input and the native scrollbar stays at the pane edge. Keep the page column width and mirror the production layout in Storybook.

Generated-by: Codex
---
 apps/desktop/e2e/settings.spec.ts             | 38 +++++++++++++++++++
 .../renderer/settings/settings-surface.tsx    |  7 +++-
 .../renderer/styles/settings/nav-sidebar.css  |  6 ++-
 .../settings/provider-settings.stories.tsx    |  4 +-
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/e2e/settings.spec.ts b/apps/desktop/e2e/settings.spec.ts
index 286d4d7d25..7e7f259a4b 100644
--- a/apps/desktop/e2e/settings.spec.ts
+++ b/apps/desktop/e2e/settings.spec.ts
@@ -47,3 +47,41 @@ test('settings hides expanded workbar chrome and restores it on close', async ({
   await expect(workbarToolbar).toBeVisible();
   await expect(taskTab).toBeVisible();
 });
+
+test('wide settings gutters scroll the whole main pane', async ({ window: page }) => {
+  await page.setViewportSize({ width: 1600, height: 520 });
+  await page.getByRole('button', { name: '设置' }).click();
+  await page.getByRole('button', { name: '通用', exact: true }).click();
+  await expect(page.getByRole('textbox', { name: '助手语气偏好' })).toBeEnabled();
+
+  const pane = page.locator('.settingsMainPane');
+  const content = pane.locator('.settingsPageStack').first();
+  const geometry = await pane.evaluate((element) => {
+    const paneRect = element.getBoundingClientRect();
+    const contentElement = element.querySelector('.settingsPageStack');
+    const contentRect = contentElement?.getBoundingClientRect();
+    const layoutContent = element.querySelector('.astryx-layout-content');
+    if (!contentRect || !layoutContent) throw new Error('Settings layout is incomplete');
+    return {
+      blankRight: paneRect.right - contentRect.right,
+      clientHeight: element.clientHeight,
+      contentOverflowY: getComputedStyle(layoutContent).overflowY,
+      paneOverflowY: getComputedStyle(element).overflowY,
+      scrollHeight: element.scrollHeight,
+      wheelPoint: {
+        x: Math.floor((contentRect.right + paneRect.right) / 2),
+        y: Math.floor(Math.min(contentRect.top + 120, paneRect.bottom - 40)),
+      },
+    };
+  });
+
+  expect(geometry.blankRight).toBeGreaterThan(40);
+  expect(geometry.scrollHeight).toBeGreaterThan(geometry.clientHeight);
+  expect(geometry.contentOverflowY).not.toBe('auto');
+  expect(geometry.paneOverflowY).toBe('auto');
+
+  await page.mouse.move(geometry.wheelPoint.x, geometry.wheelPoint.y);
+  await page.mouse.wheel(0, 600);
+  await expect.poll(() => pane.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
+  await expect(content).toBeVisible();
+});
diff --git a/apps/desktop/src/renderer/settings/settings-surface.tsx b/apps/desktop/src/renderer/settings/settings-surface.tsx
index a87e20fb62..812c887a2a 100644
--- a/apps/desktop/src/renderer/settings/settings-surface.tsx
+++ b/apps/desktop/src/renderer/settings/settings-surface.tsx
@@ -674,7 +674,10 @@ export function SettingsSurface(props: {
             aria-label={copy.contentLabel}
           >
             <Layout
-              height="fill"
+              /* The rounded main pane owns page scrolling. Keeping scroll on
+                 the centered LayoutContent made the wide gutters inert and
+                 parked the scrollbar beside the 920px content column. */
+              height="auto"
               padding={0}
               /* One column width for EVERY section. Usage used to get 920
                  while the rest sat in a 640 column, so switching pages
@@ -709,7 +712,7 @@ export function SettingsSurface(props: {
                 </LayoutHeader>
               )}
               content={(
-                <LayoutContent padding={6}>
+                <LayoutContent padding={6} isScrollable={false}>
                   {loading ? (
                     <SettingsSkeleton />
                   ) : requiresRuntimeHost && runtimeHostContentStatus === 'error' ? (
diff --git a/apps/desktop/src/renderer/styles/settings/nav-sidebar.css b/apps/desktop/src/renderer/styles/settings/nav-sidebar.css
index c90934af21..4d21aa6e0c 100644
--- a/apps/desktop/src/renderer/styles/settings/nav-sidebar.css
+++ b/apps/desktop/src/renderer/styles/settings/nav-sidebar.css
@@ -44,7 +44,11 @@
   border: 0;
   border-radius: var(--radius-modal);
   background: var(--agents-content-area-bg);
-  overflow: hidden;
+  /* The pane, not the centered 920px column, is the page scroll owner. This
+     lets wheel input from either wide gutter scroll and keeps the native
+     scrollbar against the pane's outer edge. */
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .settingsPageHeader {
diff --git a/apps/desktop/stories/settings/provider-settings.stories.tsx b/apps/desktop/stories/settings/provider-settings.stories.tsx
index 25131b56fa..7a6b417778 100644
--- a/apps/desktop/stories/settings/provider-settings.stories.tsx
+++ b/apps/desktop/stories/settings/provider-settings.stories.tsx
@@ -330,7 +330,7 @@ function ProviderStoryFrame(props: {
               window's width and hides exactly the layout question a page-level
               form raises. */}
           <Layout
-            height="fill"
+            height="auto"
             padding={0}
             contentWidth={920}
             header={(
@@ -343,7 +343,7 @@ function ProviderStoryFrame(props: {
               </LayoutHeader>
             )}
             content={(
-              <LayoutContent padding={6}>
+              <LayoutContent padding={6} isScrollable={false}>
                 <SettingsPage className="settingsModelsPage">
                   <ProvidersPanel bridge={props.bridge} />
                 </SettingsPage>