diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx index 3a70390d0c4..53a9ae48784 100644 --- a/apps/web/src/components/AppSidebarLayout.tsx +++ b/apps/web/src/components/AppSidebarLayout.tsx @@ -1,6 +1,12 @@ import { useAtomValue } from "@effect/atom-react"; import * as Schema from "effect/Schema"; -import { useEffect, useState, type CSSProperties, type ReactNode } from "react"; +import { + useEffect, + useState, + useSyncExternalStore, + type CSSProperties, + type ReactNode, +} from "react"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { isElectron } from "../env"; @@ -31,6 +37,15 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "90px"; +function subscribeToViewportWidth(onChange: () => void): () => void { + window.addEventListener("resize", onChange); + return () => window.removeEventListener("resize", onChange); +} + +function readViewportWidth(): number { + return window.innerWidth; +} + function readInitialThreadSidebarWidth(): number { try { return resolveInitialThreadSidebarWidth( @@ -109,7 +124,11 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) { const useSidebarV2Theme = useSidebarV2 || isOnSettings; const isMacosDesktop = isElectron && isMacPlatform(navigator.platform); const [sidebarWidth, setSidebarWidth] = useState(readInitialThreadSidebarWidth); - const sidebarMaximumWidth = resolveThreadSidebarMaximumWidth(window.innerWidth); + // Subscribed rather than read once: the clamp must track live window size, + // and a clamped drag ends with an unchanged width, which skips the re-render + // that would otherwise refresh a render-time snapshot. + const viewportWidth = useSyncExternalStore(subscribeToViewportWidth, readViewportWidth); + const sidebarMaximumWidth = resolveThreadSidebarMaximumWidth(viewportWidth); const [isWindowFullscreen, setIsWindowFullscreen] = useState(() => { const getWindowFullscreenState = window.desktopBridge?.getWindowFullscreenState; return isMacosDesktop && typeof getWindowFullscreenState === "function"