mirror of
https://github.com/HKUDS/nanobot.git
synced 2026-09-03 09:41:39 +03:00
fix(webui): tighten native settings spacing
This commit is contained in:
@@ -76,13 +76,16 @@ export function SettingsSidebar({
|
|||||||
<aside
|
<aside
|
||||||
className={cn(
|
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",
|
"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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onBackToChat}
|
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 />
|
<ChevronLeft className="h-3.5 w-3.5" aria-hidden />
|
||||||
{t("settings.backToChat")}
|
{t("settings.backToChat")}
|
||||||
|
|||||||
@@ -480,6 +480,9 @@ describe("App layout", () => {
|
|||||||
expect(
|
expect(
|
||||||
screen.getByRole("navigation", { name: "Settings sections" }),
|
screen.getByRole("navigation", { name: "Settings sections" }),
|
||||||
).toBeInTheDocument();
|
).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(container.querySelectorAll("main")).toHaveLength(1);
|
||||||
expect(screen.getByRole("heading", { level: 1, name: "Settings" })).toBeInTheDocument();
|
expect(screen.getByRole("heading", { level: 1, name: "Settings" })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -1657,6 +1660,28 @@ describe("App layout", () => {
|
|||||||
await waitFor(() => expect(flowSidebar).toHaveStyle({ width: "272px" }));
|
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 () => {
|
it("uses native chrome when the host bridge overrides browser gateway metadata", async () => {
|
||||||
Reflect.set(window, "nanobotHost", { pickFolder: vi.fn() });
|
Reflect.set(window, "nanobotHost", { pickFolder: vi.fn() });
|
||||||
vi.mocked(fetchBootstrap).mockResolvedValue({
|
vi.mocked(fetchBootstrap).mockResolvedValue({
|
||||||
|
|||||||
Reference in New Issue
Block a user