diff --git a/apps/desktop/src/main/body.test.tsx b/apps/desktop/src/main/body.test.tsx index 9656dcc62f..4b92512ca0 100644 --- a/apps/desktop/src/main/body.test.tsx +++ b/apps/desktop/src/main/body.test.tsx @@ -722,7 +722,7 @@ describe("ClassicMainBody", () => { expect(panels[1]?.dataset.minWidth).toBe("500"); }); - it("prefers a 700px settings panel without overflowing a narrower window", () => { + it("lets the settings content panel shrink beside the sidebar", () => { mocks.currentTab = { active: true, pinned: false, @@ -734,7 +734,7 @@ describe("ClassicMainBody", () => { render(); const panels = screen.getAllByTestId("panel"); - expect(panels[1]?.dataset.minWidth).toBe("min(700px, 100%)"); + expect(panels[1]?.dataset.minWidth).toBeUndefined(); }); it("unmounts hidden sidebar content when the panel is collapsed", () => { diff --git a/apps/desktop/src/main/body.tsx b/apps/desktop/src/main/body.tsx index a1a27a74d2..b531c098ca 100644 --- a/apps/desktop/src/main/body.tsx +++ b/apps/desktop/src/main/body.tsx @@ -40,10 +40,7 @@ import { usesWindowsStyleTitleBar, useWindowControlsGutter, } from "~/shared/hooks/useWindowControlsGutter"; -import { - boundedMinWidthPx, - getMainContentMinWidth, -} from "~/shared/main/layout-widths"; +import { getMainContentMinWidth } from "~/shared/main/layout-widths"; import { useOpenNoteDialog } from "~/shared/open-note-dialog"; import { useNewNote } from "~/shared/useNewNote"; import { useSidebarNotes } from "~/sidebar/note-filter"; @@ -90,11 +87,7 @@ export function ClassicMainBody({ leftSidebarPanelConstraintsRef.current = leftSidebarPanelConstraints; const isOnboarding = currentTab?.type === "onboarding"; - const mainContentMinWidthPx = getMainContentMinWidth(currentTab); - const mainContentMinWidth = - currentTab?.type === "settings" && mainContentMinWidthPx != null - ? boundedMinWidthPx(mainContentMinWidthPx) - : mainContentMinWidthPx; + const mainContentMinWidth = getMainContentMinWidth(currentTab); const hasCustomSidebar = hasCustomSidebarTab(currentTab); const hasLeftSurfaceCustomSidebar = hasLeftSurfaceCustomSidebarTab(currentTab); diff --git a/apps/desktop/src/settings/general/app-settings.test.tsx b/apps/desktop/src/settings/general/app-settings.test.tsx index 61450bad16..c9d6c00827 100644 --- a/apps/desktop/src/settings/general/app-settings.test.tsx +++ b/apps/desktop/src/settings/general/app-settings.test.tsx @@ -45,10 +45,17 @@ describe("AppSettingsView", () => { it("lets switch descriptions use the available row width", () => { renderAppSettings(); - expect( - screen.getByRole("switch", { name: "Start Anarlog at login" }) - .parentElement?.className, - ).not.toContain("w-48"); + const loginSwitch = screen.getByRole("switch", { + name: "Start Anarlog at login", + }); + + expect(loginSwitch.parentElement?.className).not.toContain("w-48"); + expect(loginSwitch.parentElement?.parentElement?.className).toContain( + "min-w-0", + ); + expect(loginSwitch.parentElement?.parentElement?.className).toContain( + "w-full", + ); }); it("hides macOS-only Dock controls outside macOS", () => { diff --git a/apps/desktop/src/settings/setting-row.tsx b/apps/desktop/src/settings/setting-row.tsx index d9450de9f6..f1ac032013 100644 --- a/apps/desktop/src/settings/setting-row.tsx +++ b/apps/desktop/src/settings/setting-row.tsx @@ -24,7 +24,7 @@ export function SettingRow({ const descriptionId = useId(); return ( -
+

{title} @@ -37,8 +37,9 @@ export function SettingRow({

{children({ diff --git a/apps/desktop/src/shared/main/index.test.tsx b/apps/desktop/src/shared/main/index.test.tsx index 3255c7a417..f89a4d5633 100644 --- a/apps/desktop/src/shared/main/index.test.tsx +++ b/apps/desktop/src/shared/main/index.test.tsx @@ -69,6 +69,13 @@ describe("StandardContentWrapper", () => { expect(screen.getAllByTestId("panel")).toHaveLength(1); expect(screen.getByTestId("panel").dataset.defaultSize).toBe("100"); expect(screen.getByTestId("panel").dataset.minSize).toBe("35"); + expect(screen.getByTestId("panel").dataset.className).toContain("min-w-0"); + expect( + screen.getByTestId("panel-group").parentElement?.className, + ).toContain("min-w-0"); + expect( + screen.getByTestId("panel-group").parentElement?.className, + ).toContain("w-full"); expect(screen.getByTestId("main-area")).toBeTruthy(); expect( document.querySelector("[data-chat-floating-anchor]")?.className, diff --git a/apps/desktop/src/shared/main/index.tsx b/apps/desktop/src/shared/main/index.tsx index c669e23da3..80ae77441e 100644 --- a/apps/desktop/src/shared/main/index.tsx +++ b/apps/desktop/src/shared/main/index.tsx @@ -26,9 +26,16 @@ export function StandardContentWrapper({ noBorder?: boolean; }) { return ( -
- - +
+ + {children} @@ -54,14 +61,14 @@ function MainPanel({ return (
{ - it("keeps a settings surface preference without overflowing its parent", () => { - expect(getMainContentMinWidth({ type: "settings" })).toBe( - SETTINGS_SURFACE_MIN_WIDTH_PX, - ); + it("does not force a 700px inner settings panel beside the sidebar", () => { + expect(getMainContentMinWidth({ type: "settings" })).toBeUndefined(); + }); + + it("caps a preferred min-width so it cannot exceed its parent", () => { expect(boundedMinWidthPx(SETTINGS_SURFACE_MIN_WIDTH_PX)).toBe( "min(700px, 100%)", ); diff --git a/apps/desktop/src/shared/main/layout-widths.ts b/apps/desktop/src/shared/main/layout-widths.ts index 1e313f1234..60350dc8d0 100644 --- a/apps/desktop/src/shared/main/layout-widths.ts +++ b/apps/desktop/src/shared/main/layout-widths.ts @@ -17,9 +17,6 @@ export function getMainContentMinWidth(tab: Pick | null) { if (tab?.type === "automations") { return AUTOMATIONS_SURFACE_MIN_WIDTH_PX; } - if (tab?.type === "settings") { - return SETTINGS_SURFACE_MIN_WIDTH_PX; - } return usesNoteSurfaceMinWidth(tab) ? NOTE_SURFACE_MIN_WIDTH_PX : undefined; }