fix: restore mobile settings detail scrolling

Author: pallyoung

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -801,6 +801,38 @@ describe("SettingsPage", () => {
     expect(screen.queryByLabelText("启动命令参数")).not.toBeInTheDocument();
   });
 
+  it("uses a scrollable mobile detail layout for secondary settings pages without fill-height classes", async () => {
+    viewportMocks.viewport = "mobile";
+    const sendCommand = vi.fn().mockResolvedValue({});
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+    fireEvent.click(screen.getByRole("button", { name: "通用" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("通知")).toBeInTheDocument();
+    });
+
+    const detailBody = document.querySelector(".settings-body--mobile");
+    const detailContent = document.querySelector(".settings-content--mobile");
+
+    expect(detailBody).not.toBeNull();
+    expect(detailContent).not.toBeNull();
+    expect(document.querySelector(".settings-body--mobile-detail")).not.toBeNull();
+    expect(document.querySelector(".settings-content--mobile-detail")).not.toBeNull();
+    expect(document.querySelector(".settings-body--mobile.settings-body--fill-height")).toBeNull();
+    expect(
+      document.querySelector(".settings-content--mobile.settings-content--fill-height")
+    ).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "返回" }));
+
+    expect(screen.getByRole("button", { name: "Providers" })).toBeInTheDocument();
+    expect(document.querySelector(".settings-body--mobile")).toBeNull();
+    expect(document.querySelector(".settings-body--mobile-detail")).toBeNull();
+    expect(document.querySelector(".settings-content--mobile-detail")).toBeNull();
+  });
+
   it("shows provider base settings first on mobile and enters config files through the secondary action", async () => {
     viewportMocks.viewport = "mobile";
     const sendCommand = vi.fn().mockImplementation(async (op: string, args: unknown) => {

packages/web/src/features/settings/components/settings-page.tsx

@@ -381,6 +381,7 @@ export function SettingsPage() {
   );
 
   const shouldShowMobileRoot = isMobile && navigationState.kind === "root";
+  const isMobileDetailView = isMobile && navigationState.kind === "detail";
   const headerTitle = isMobile
     ? t(shouldShowMobileRoot ? "settings.title" : activeSectionMeta.labelKey)
     : t("settings.title");
@@ -400,7 +401,7 @@ export function SettingsPage() {
         renderMobileRoot()
       ) : (
         <div
-          className={`settings-body ${isMobile ? "settings-body--mobile" : ""} ${contentLayoutMode === "fill-height" ? "settings-body--fill-height" : ""}`}
+          className={`settings-body ${isMobile ? "settings-body--mobile" : ""} ${isMobileDetailView ? "settings-body--mobile-detail" : ""} ${contentLayoutMode === "fill-height" ? "settings-body--fill-height" : ""}`}
         >
           {isMobile ? null : (
             <aside className="settings-sidebar">
@@ -419,7 +420,7 @@ export function SettingsPage() {
           )}
 
           <main
-            className={`settings-content ${isMobile ? "settings-content--mobile" : ""} ${contentLayoutMode === "fill-height" ? "settings-content--fill-height" : ""}`}
+            className={`settings-content ${isMobile ? "settings-content--mobile" : ""} ${isMobileDetailView ? "settings-content--mobile-detail" : ""} ${contentLayoutMode === "fill-height" ? "settings-content--fill-height" : ""}`}
           >
             {settingsLoadError && (
               <Notice

packages/web/src/styles/components.css

@@ -9724,6 +9724,13 @@ textarea.input {
     background: var(--bg-page);
   }
 
+  .settings-body--mobile-detail {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+  }
+
   .settings-body--mobile.settings-body--fill-height {
     display: flex;
     flex: 1;
@@ -9741,6 +9748,12 @@ textarea.input {
     padding-bottom: var(--sp-5);
   }
 
+  .settings-content--mobile-detail {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
   .settings-page--mobile .settings-content--mobile-root {
     padding-left: var(--sp-2);
     padding-right: var(--sp-2);