Keep settings controls visible in a narrow window (#7269)

Author: ComputelessComputer

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(<ClassicMainBody />);
 
     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", () => {

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);

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", () => {

apps/desktop/src/settings/setting-row.tsx

@@ -24,7 +24,7 @@ export function SettingRow({
   const descriptionId = useId();
 
   return (
-    <div className="flex items-center justify-between gap-4">
+    <div className="flex w-full min-w-0 items-center justify-between gap-4">
       <div className="min-w-0 flex-1">
         <h3 id={titleId} className="mb-1 text-sm font-medium">
           {title}
@@ -37,8 +37,9 @@ export function SettingRow({
       </div>
       <div
         className={cn([
-          "flex shrink-0 justify-end",
-          controlWidth === "fixed" && "w-48",
+          "flex justify-end",
+          controlWidth === "fixed" && "w-48 max-w-full min-w-0",
+          controlWidth !== "fixed" && "shrink-0",
         ])}
       >
         {children({

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,

apps/desktop/src/shared/main/index.tsx

@@ -26,9 +26,16 @@ export function StandardContentWrapper({
   noBorder?: boolean;
 }) {
   return (
-    <div className="flex h-full flex-col">
-      <ResizablePanelGroup direction="vertical" className="min-h-0 flex-1">
-        <ResizablePanel defaultSize={100} minSize={35} className="min-h-0">
+    <div className="flex h-full w-full min-w-0 flex-col">
+      <ResizablePanelGroup
+        direction="vertical"
+        className="min-h-0 min-w-0 flex-1"
+      >
+        <ResizablePanel
+          defaultSize={100}
+          minSize={35}
+          className="min-h-0 min-w-0"
+        >
           <MainPanel fill floatingButton={floatingButton} noBorder={noBorder}>
             {children}
           </MainPanel>
@@ -54,14 +61,14 @@ function MainPanel({
   return (
     <div
       className={cn([
-        "relative flex min-h-0 flex-1 flex-col",
+        "relative flex min-h-0 min-w-0 flex-1 flex-col",
         fill && "h-full",
       ])}
     >
       <div
         data-chat-floating-anchor
         className={cn([
-          "bg-card @container relative flex min-h-0 flex-1 flex-col overflow-hidden",
+          "bg-card @container relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
           isMacos && "rounded-xl",
           !noBorder && "border-border border",
         ])}

apps/desktop/src/shared/main/layout-widths.test.ts

@@ -7,10 +7,11 @@ import {
 } from "./layout-widths";
 
 describe("layout-widths", () => {
-  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%)",
     );

apps/desktop/src/shared/main/layout-widths.ts

@@ -17,9 +17,6 @@ export function getMainContentMinWidth(tab: Pick<Tab, "type"> | 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;
 }