fix(webui): tighten native settings spacing

This commit is contained in:
Xubin Ren
2026-09-03 13:38:21 +08:00
parent ea57b80fb5
commit 38e3bca2ad
2 changed files with 30 additions and 2 deletions
@@ -76,13 +76,16 @@ export function SettingsSidebar({
<aside
className={cn(
"flex w-full shrink-0 flex-col bg-settings-surface px-3 pb-2 lg:w-[17rem] lg:px-3 lg:pb-4",
hostChromeInset ? "pt-[4.25rem] lg:pt-[4.25rem]" : "pt-4 lg:pt-4",
hostChromeInset ? "pt-10 lg:pt-10" : "pt-4 lg:pt-4",
)}
>
<button
type="button"
onClick={onBackToChat}
className="touch-target mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3"
className={cn(
"touch-target mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3",
hostChromeInset && "-ml-1",
)}
>
<ChevronLeft className="h-3.5 w-3.5" aria-hidden />
{t("settings.backToChat")}
+25
View File
@@ -480,6 +480,9 @@ describe("App layout", () => {
expect(
screen.getByRole("navigation", { name: "Settings sections" }),
).toBeInTheDocument();
const backButton = screen.getByRole("button", { name: "Back to chat" });
expect(backButton.closest("aside")).toHaveClass("pt-4", "lg:pt-4");
expect(backButton).not.toHaveClass("-ml-1");
expect(container.querySelectorAll("main")).toHaveLength(1);
expect(screen.getByRole("heading", { level: 1, name: "Settings" })).toBeInTheDocument();
});
@@ -1657,6 +1660,28 @@ describe("App layout", () => {
await waitFor(() => expect(flowSidebar).toHaveStyle({ width: "272px" }));
});
it("aligns native settings navigation below the titlebar without extra top padding", async () => {
vi.mocked(fetchBootstrap).mockResolvedValue({
token: "tok",
api_token: "api-tok",
ws_path: "/",
expires_in: 300,
runtime_surface: "native",
});
mockFetchRoutes({ "/api/settings": baseSettingsPayload() });
render(<App />);
await waitFor(() => expect(connectSpy).toHaveBeenCalled());
const sidebar = screen.getByRole("navigation", { name: "Sidebar navigation" });
fireEvent.click(within(sidebar).getByRole("button", { name: "Settings" }));
const backButton = await screen.findByRole("button", { name: "Back to chat" });
expect(backButton.closest("aside")).toHaveClass("pt-10", "lg:pt-10");
expect(backButton.closest("aside")).not.toHaveClass("pt-[4.25rem]");
expect(backButton).toHaveClass("-ml-1");
});
it("uses native chrome when the host bridge overrides browser gateway metadata", async () => {
Reflect.set(window, "nanobotHost", { pickFolder: vi.fn() });
vi.mocked(fetchBootstrap).mockResolvedValue({