Fix desktop layout and window controls at half-screen width (#1983)

* fix(app): preserve desktop layout in half-screen windows Treat native window controls as physical corner obstructions instead of deriving clearance from compact layout state. Keep 751px windows in desktop mode while preserving usable content when persisted sidebars are wide. * fix(app): retain sidebar width across window resizes * fix(app): yield app sidebar to narrow settings * test(app): wait for mobile sidebar motion to settle * fix(app): yield navigation to narrow workspace explorer * fix(app): mark sidebar sizing helpers as worklets * fix(app): hide app navigation when space is constrained
2026-07-14 23:01:14 +02:00
parent 1b8af2e58e
commit 50ed0d0ab1
27 changed files with 1263 additions and 718 deletions
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  canDesktopAppSidebarShare,
+  resolveDesktopAppContentMinimum,
+  resolveDesktopExplorerWidth,
+  resolveDesktopSidebarWidth,
+} from "@/components/desktop-sidebar-layout";
+
+describe("desktop sidebar layout", () => {
+  it("clamps a persisted wide sidebar to preserve the center pane", () => {
+    const atHalfScreen = resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 751 });
+    expect(atHalfScreen).toBe(351);
+    expect(751 - atHalfScreen).toBe(400);
+
+    const atBreakpoint = resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 720 });
+    expect(atBreakpoint).toBe(320);
+    expect(720 - atBreakpoint).toBe(400);
+
+    expect(resolveDesktopSidebarWidth({ requestedWidth: 600, viewportWidth: 1440 })).toBe(600);
+  });
+
+  it("keeps a temporarily narrow explorer render-only", () => {
+    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 751 })).toBe(351);
+    expect(resolveDesktopExplorerWidth({ requestedWidth: 400, viewportWidth: 1440 })).toBe(400);
+  });
+
+  it("yields app navigation when settings or Explorer need the shell width", () => {
+    const settingsMinimum = resolveDesktopAppContentMinimum({
+      isSettingsRoute: true,
+      isWorkspaceExplorerOpen: false,
+      requestedExplorerWidth: 400,
+      viewportWidth: 751,
+    });
+    expect(settingsMinimum).toBe(720);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: settingsMinimum,
+        requestedSidebarWidth: 320,
+        viewportWidth: 751,
+      }),
+    ).toBe(false);
+
+    const explorerMinimum = resolveDesktopAppContentMinimum({
+      isSettingsRoute: false,
+      isWorkspaceExplorerOpen: true,
+      requestedExplorerWidth: 400,
+      viewportWidth: 751,
+    });
+    expect(explorerMinimum).toBe(751);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: explorerMinimum,
+        requestedSidebarWidth: 320,
+        viewportWidth: 751,
+      }),
+    ).toBe(false);
+    expect(
+      canDesktopAppSidebarShare({
+        contentMinimumWidth: resolveDesktopAppContentMinimum({
+          isSettingsRoute: false,
+          isWorkspaceExplorerOpen: true,
+          requestedExplorerWidth: 400,
+          viewportWidth: 1120,
+        }),
+        requestedSidebarWidth: 320,
+        viewportWidth: 1120,
+      }),
+    ).toBe(true);
+  });
+});