feat(web): harden responsive workspace layout

Author: redxzeta

apps/web/src/components/ChatView.browser.tsx

@@ -67,6 +67,7 @@ import { useTerminalStateStore } from "../terminalStateStore";
 import { resetRetainedThreadDetailSubscriptionsForTests } from "../threadDetailSubscriptionRetention";
 import { useWorkspacePathsStore } from "../workspacePathsStore";
 import { resetWsNativeApiForTest } from "../wsNativeApi";
+import { useRightDockStore } from "../rightDockStore";
 // Pre-transform the compiler-heavy component outside the first case's timeout.
 // The router's auto-split route otherwise requests this module on first mount.
 import "./ChatView";
@@ -2151,6 +2152,7 @@ describe("ChatView timeline estimator parity (full app)", () => {
     useTerminalStateStore.setState({
       terminalStateByThreadId: {},
     });
+    useRightDockStore.setState({ dockStateByThreadId: {} });
     useSplitViewStore.setState({
       splitViewsById: {},
       splitViewIdBySourceThreadId: {},
@@ -8657,4 +8659,102 @@ describe("ChatView timeline estimator parity (full app)", () => {
       await mounted.cleanup();
     }
   });
+
+  it("[geometry:linux] coordinates sidebar, dock, Environment, and composer bounds", async () => {
+    useRightDockStore.getState().openPane(THREAD_ID, {
+      kind: "browser",
+      paneId: "layout-browser",
+    });
+    const mounted = await mountChatView({
+      viewport: { ...DEFAULT_VIEWPORT, width: 1_440, height: 900 },
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-workspace-layout" as MessageId,
+        targetText: "Keep the workspace controls reachable.",
+      }),
+    });
+
+    try {
+      const environmentToggle = await waitForElement(
+        () =>
+          document.querySelector<HTMLButtonElement>(
+            'button[aria-label="Toggle environment panel"]',
+          ),
+        "Environment toggle did not mount.",
+      );
+      await userEvent.click(environmentToggle);
+      const environment = await waitForElement(
+        () =>
+          document.querySelector<HTMLElement>(
+            '[data-environment-panel-variant]:not([aria-hidden="true"])',
+          ),
+        "Environment panel did not open.",
+      );
+      const composer = await waitForElement(
+        () => document.querySelector<HTMLElement>('[data-chat-composer-form="true"]'),
+        "Composer did not mount.",
+      );
+      const dock = await waitForElement(
+        () => document.querySelector<HTMLElement>("[data-right-dock-content]"),
+        "Right dock did not mount.",
+      );
+      const chat = await waitForElement(
+        () => document.querySelector<HTMLElement>('[data-chat-pane-drop-overlay="true"]'),
+        "Chat surface did not mount.",
+      );
+
+      await vi.waitFor(
+        () => {
+          expect(environment.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+            composer.getBoundingClientRect().top + 1,
+          );
+          expect(chat.getBoundingClientRect().width).toBeGreaterThanOrEqual(36 * 16);
+          expect(dock.getBoundingClientRect().width).toBeLessThanOrEqual(608);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      const forkTools = Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(
+        (button) => button.textContent?.includes("Fork Tools"),
+      );
+      const forkLore = Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(
+        (button) => button.textContent?.includes("Fork Lore"),
+      );
+      expect(forkTools?.getAttribute("aria-expanded")).toBe("false");
+      expect(forkLore?.getAttribute("aria-expanded")).toBe("false");
+      if (!forkTools) throw new Error("Fork Tools disclosure did not mount.");
+      await userEvent.click(forkTools);
+      expect(forkTools.getAttribute("aria-expanded")).toBe("true");
+
+      await mounted.setViewport({ ...DEFAULT_VIEWPORT, width: 1_024, height: 768 });
+      await vi.waitFor(
+        () => {
+          expect(
+            document.querySelector('[data-workspace-sidebar-suppressed="true"]'),
+          ).toBeTruthy();
+          expect(chat.getBoundingClientRect().width).toBeGreaterThanOrEqual(36 * 16);
+          expect(dock.getBoundingClientRect().width).toBeLessThanOrEqual(448);
+          expect(environment.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+            composer.getBoundingClientRect().top + 1,
+          );
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      await mounted.setViewport({ ...DEFAULT_VIEWPORT, width: 1_440, height: 900 });
+      await vi.waitFor(
+        () => {
+          expect(
+            document.querySelector('[data-workspace-sidebar-suppressed="true"]'),
+          ).toBeNull();
+          const sidebarGap = document.querySelector<HTMLElement>(
+            "[data-sidebar-side='left'] [data-slot='sidebar-gap']",
+          );
+          expect(sidebarGap?.getBoundingClientRect().width ?? 0).toBeGreaterThan(0);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
 });

apps/web/src/components/ChatView.tsx

@@ -12515,6 +12515,7 @@ export default function ChatView({
               {...environmentPanelProps}
               open={environmentPanelVisible}
               variant={environmentOverlayVariant}
+              bottomInsetPx={composerOverlayHeightPx + 12}
             />
           ) : null}
         </div>

apps/web/src/components/chat/RightDock.tsx

@@ -49,6 +49,7 @@ import {
   resolveRightDockPaneLabel,
 } from "./rightDockPaneMeta";
 import { useDesktopTopBarWindowControlsGutterClassName } from "~/hooks/useDesktopTopBarGutter";
+import { clampRightDockWidth, resolveRightDockMaxWidth } from "~/workspaceLayout";
 
 // Shared sizing defaults for dock hosts: the resize floor for a single readable pane and the
 // "half the shell, but never cramped" opening width. The thread route tunes its own values
@@ -197,26 +198,60 @@ export function RightDock(props: RightDockProps) {
   // pin the dock width to exactly half of it. Mid-session drags still resize
   // freely; the next open re-centers the split.
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const preferredWidthRef = useRef<number | null>(null);
+  const previousOpenRef = useRef(false);
+  const previousActivePaneKindRef = useRef<RightDockPaneKind | null>(null);
+  const [hostWidthPx, setHostWidthPx] = useState(0);
   const minWidth = props.minWidth;
   const activePaneKind = activePane?.kind ?? null;
-  useEffect(() => {
-    if (!props.state.open) {
-      return;
-    }
+  useLayoutEffect(() => {
     const wrapper = contentRef.current?.closest<HTMLElement>("[data-slot='sidebar-wrapper']");
     const shell = wrapper?.parentElement;
     if (!wrapper || !shell) {
       return;
     }
+    const measure = () => setHostWidthPx(Math.round(shell.getBoundingClientRect().width));
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(shell);
+    return () => observer.disconnect();
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!props.state.open) {
+      previousOpenRef.current = false;
+      previousActivePaneKindRef.current = activePaneKind;
+      return;
+    }
+    const wrapper = contentRef.current?.closest<HTMLElement>("[data-slot='sidebar-wrapper']");
+    const shell = wrapper?.parentElement;
+    if (!wrapper || !shell) return;
+    const measuredHostWidthPx = hostWidthPx || Math.round(shell.getBoundingClientRect().width);
+    if (measuredHostWidthPx <= 0) return;
     // A phone-shaped pane has a natural width: half the shell leaves the device
     // stranded in empty space, so kinds that render a fixed-aspect object open
     // at their own comfortable size instead of the even split.
-    const preferredWidth = activePaneKind ? RIGHT_DOCK_PREFERRED_WIDTH[activePaneKind] : undefined;
-    const openWidth = preferredWidth ?? Math.round(shell.getBoundingClientRect().width / 2);
-    if (openWidth > 0) {
-      wrapper.style.setProperty("--sidebar-width", `${Math.max(minWidth, openWidth)}px`);
+    const isOpening = !previousOpenRef.current;
+    const paneKindChanged = previousActivePaneKindRef.current !== activePaneKind;
+    if (isOpening || paneKindChanged || preferredWidthRef.current === null) {
+      preferredWidthRef.current =
+        (activePaneKind ? RIGHT_DOCK_PREFERRED_WIDTH[activePaneKind] : undefined) ??
+        Math.round(measuredHostWidthPx / 2);
     }
-  }, [props.state.open, minWidth, activePaneKind]);
+    const nextWidthPx = clampRightDockWidth({
+      requestedWidthPx: preferredWidthRef.current,
+      hostWidthPx: measuredHostWidthPx,
+      minWidthPx: minWidth,
+    });
+    wrapper.style.setProperty("--sidebar-width", `${nextWidthPx}px`);
+    previousOpenRef.current = true;
+    previousActivePaneKindRef.current = activePaneKind;
+  }, [props.state.open, minWidth, activePaneKind, hostWidthPx]);
+  const maxWidth = resolveRightDockMaxWidth(hostWidthPx);
   const renderedPanes = props.state.panes.filter(
     (pane) => pane.id === activePane?.id || keepMountedPaneIds.has(pane.id),
   );
@@ -268,6 +303,10 @@ export function RightDock(props: RightDockProps) {
         transparentSurface
         resizable={{
           minWidth: props.minWidth,
+          ...(maxWidth === null ? {} : { maxWidth }),
+          onResize: (width) => {
+            preferredWidthRef.current = width;
+          },
           shouldAcceptWidth: props.shouldAcceptWidth,
         }}
       >

apps/web/src/components/chat/environment/EnvironmentPanel.tsx

@@ -21,7 +21,7 @@ import type {
   ThreadMarkerId,
 } from "@forkara/contracts";
 import { useNavigate } from "@tanstack/react-router";
-import { type ReactNode, useEffect } from "react";
+import { type CSSProperties, type ReactNode, useEffect } from "react";
 
 import { useAppSettings } from "~/appSettings";
 import { SETTINGS_TARGETS } from "~/settingsNavigation";
@@ -125,6 +125,8 @@ export interface EnvironmentPanelProps {
    * only, no content inset.
    */
   variant: "docked" | "floating";
+  /** Measured composer footprint. The panel's bottom edge stays above this live inset. */
+  bottomInsetPx?: number;
   gitCwd: string | null;
   openInTarget: string | null;
   githubRepository?: {
@@ -250,6 +252,7 @@ function EnvironmentRecapSection({
 export function EnvironmentPanel({
   open,
   variant,
+  bottomInsetPx = 0,
   gitCwd,
   openInTarget,
   githubRepository: githubRepositoryProp,
@@ -597,7 +600,9 @@ export function EnvironmentPanel({
     <div
       className={ENVIRONMENT_PANEL_OVERLAY_WRAPPER_CLASS_NAME}
       data-environment-panel-variant={variant}
+      data-environment-panel-bottom-inset={Math.max(0, Math.round(bottomInsetPx))}
       aria-hidden={!open}
+      style={{ bottom: Math.max(0, Math.round(bottomInsetPx)) } as CSSProperties}
     >
       <div
         className={cn(