Merge pull request #4607 from Ivy-Interactive/fix/breakpoint-container-aware-sidebar

Make breakpoint detection container-aware so responsive layouts respect the sidebar

Author: dcrjodle

src/frontend/src/hooks/__tests__/use-responsive.test.tsx

@@ -0,0 +1,139 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import React, { act, useRef } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { useBreakpoint, type BreakpointName } from "../use-responsive";
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(element: React.ReactElement) {
+  act(() => {
+    root.render(element);
+  });
+}
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { value: width, configurable: true, writable: true });
+}
+
+/**
+ * A controllable ResizeObserver stand-in. happy-dom does no layout, so the real
+ * observer never fires; this lets a test trigger the callback on demand.
+ */
+function stubResizeObserver() {
+  const callbacks: ResizeObserverCallback[] = [];
+  class FakeResizeObserver {
+    constructor(cb: ResizeObserverCallback) {
+      callbacks.push(cb);
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal("ResizeObserver", FakeResizeObserver);
+  return {
+    fireAll: () => {
+      act(() => {
+        callbacks.forEach((cb) => cb([], {} as ResizeObserver));
+      });
+    },
+  };
+}
+
+/** Pins clientWidth on the node the instant it attaches, before effects run. */
+function pinWidth(width: number) {
+  return (el: HTMLDivElement | null) => {
+    if (el) Object.defineProperty(el, "clientWidth", { value: width, configurable: true });
+  };
+}
+
+function Display({ width }: { width?: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const bp = useBreakpoint(width !== undefined ? ref : undefined);
+  return (
+    <div
+      ref={(el) => {
+        ref.current = el;
+        if (width !== undefined) pinWidth(width)(el);
+      }}
+      data-testid="bp"
+    >
+      {bp}
+    </div>
+  );
+}
+
+function readBp(): BreakpointName {
+  return container.querySelector('[data-testid="bp"]')!.textContent as BreakpointName;
+}
+
+describe("useBreakpoint", () => {
+  it("falls back to the viewport width when no container ref is supplied", () => {
+    setViewportWidth(500);
+    mount(<Display />);
+    expect(readBp()).toBe("mobile");
+  });
+
+  it("derives the breakpoint from the container width, not the viewport", () => {
+    // Wide viewport, but a narrow content container (e.g. sidebar open) — the
+    // breakpoint must follow the container so buttons collapse correctly.
+    setViewportWidth(1920);
+    stubResizeObserver();
+    mount(<Display width={700} />);
+    expect(readBp()).toBe("tablet");
+  });
+
+  it("re-evaluates when the observed container changes width", async () => {
+    setViewportWidth(1920);
+    const { fireAll } = stubResizeObserver();
+
+    let measured = 1100;
+    function Resizable() {
+      // A getter lets the test mutate the reported width between observer fires.
+      const setRef = (el: HTMLDivElement | null) => {
+        if (el)
+          Object.defineProperty(el, "clientWidth", { get: () => measured, configurable: true });
+      };
+      const ref = useRef<HTMLDivElement>(null);
+      const bp = useBreakpoint(ref);
+      return (
+        <div
+          ref={(el) => {
+            ref.current = el;
+            setRef(el);
+          }}
+          data-testid="bp"
+        >
+          {bp}
+        </div>
+      );
+    }
+
+    mount(<Resizable />);
+    expect(readBp()).toBe("wide");
+
+    // Sidebar opens — content shrinks below the desktop band. The observer
+    // callback is debounced by 100ms (RESIZE_DEBOUNCE_MS) before re-measuring.
+    measured = 800;
+    fireAll();
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 150));
+    });
+    expect(readBp()).toBe("desktop");
+  });
+});

src/frontend/src/hooks/use-breakpoint-context.tsx

@@ -1,10 +1,25 @@
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, type RefObject } from "react";
 import { type BreakpointName, useBreakpoint } from "./use-responsive";
 
 const BreakpointContext = createContext<BreakpointName>("desktop");
 
-export const BreakpointProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const breakpoint = useBreakpoint();
+interface BreakpointProviderProps {
+  children: React.ReactNode;
+  /**
+   * When provided, the breakpoint is derived from this element's width rather than
+   * the viewport. Mount the provider inside the app content area and pass the
+   * content container so responsive widgets react to the space actually available
+   * to them (e.g. an expanded sidebar narrows the content without changing the
+   * viewport width). Omit it for window-based behavior.
+   */
+  containerRef?: RefObject<HTMLElement | null>;
+}
+
+export const BreakpointProvider: React.FC<BreakpointProviderProps> = ({
+  children,
+  containerRef,
+}) => {
+  const breakpoint = useBreakpoint(containerRef);
   return <BreakpointContext.Provider value={breakpoint}>{children}</BreakpointContext.Provider>;
 };
 

src/frontend/src/hooks/use-responsive.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { RefObject, useEffect, useState } from "react";
 
 export interface Responsive<T> {
   default?: T;
@@ -8,33 +8,75 @@ export interface Responsive<T> {
   wide?: T;
 }
 
+// Lower bounds of each band, in px. NOTE: `wide` is the open-ended top band — any
+// width >= desktop (1024) resolves to "wide" (see getBreakpoint). The 1280 value is
+// retained for reference only and is intentionally NOT used as a threshold.
 const BREAKPOINTS = { mobile: 640, tablet: 768, desktop: 1024, wide: 1280 };
 
 export type BreakpointName = "mobile" | "tablet" | "desktop" | "wide";
 
-export function useBreakpoint(): BreakpointName {
-  const [bp, setBp] = useState<BreakpointName>(() => getBreakpoint());
+const RESIZE_DEBOUNCE_MS = 100;
+
+/**
+ * Resolves the current breakpoint from a width.
+ *
+ * Pass a `containerRef` to derive the breakpoint from that element's content-box
+ * width (via ResizeObserver) instead of `window.innerWidth`. This is what makes
+ * responsive resolution account for chrome that steals horizontal space — most
+ * importantly an expanded sidebar, which shrinks the app content area without
+ * changing the viewport width. When the ref is null/unset (or its element has not
+ * measured yet) the hook falls back to the window width.
+ */
+export function useBreakpoint(containerRef?: RefObject<HTMLElement | null>): BreakpointName {
+  const [bp, setBp] = useState<BreakpointName>(() => getBreakpoint(widthFromRef(containerRef)));
 
   useEffect(() => {
     let timeoutId: number | undefined;
+
+    const measure = () => {
+      setBp(getBreakpoint(widthFromRef(containerRef)));
+    };
+
     const onResize = () => {
       if (timeoutId !== undefined) clearTimeout(timeoutId);
-      timeoutId = window.setTimeout(() => {
-        setBp(getBreakpoint());
-      }, 100);
+      timeoutId = window.setTimeout(measure, RESIZE_DEBOUNCE_MS);
     };
+
     window.addEventListener("resize", onResize);
+
+    // Take an immediate reading: the useState initializer ran during the first render
+    // pass before refs were attached, so it could only see the window width. Now that
+    // the element exists we can measure it.
+    measure();
+
+    // When a container is supplied, observe it directly so sidebar open/close and
+    // resize-drag (which change the content width but not the viewport) re-evaluate
+    // the breakpoint.
+    let observer: ResizeObserver | undefined;
+    const el = containerRef?.current;
+    if (el && typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(onResize);
+      observer.observe(el);
+    }
+
     return () => {
       window.removeEventListener("resize", onResize);
+      observer?.disconnect();
       if (timeoutId !== undefined) clearTimeout(timeoutId);
     };
-  }, []);
+  }, [containerRef]);
 
   return bp;
 }
 
-function getBreakpoint(): BreakpointName {
-  const w = typeof window !== "undefined" ? window.innerWidth : 1024;
+function widthFromRef(containerRef?: RefObject<HTMLElement | null>): number | undefined {
+  const el = containerRef?.current;
+  if (el && el.clientWidth > 0) return el.clientWidth;
+  return undefined;
+}
+
+function getBreakpoint(width?: number): BreakpointName {
+  const w = width !== undefined ? width : typeof window !== "undefined" ? window.innerWidth : 1024;
   if (w < BREAKPOINTS.mobile) return "mobile";
   if (w < BREAKPOINTS.tablet) return "tablet";
   if (w < BREAKPOINTS.desktop) return "desktop";

src/frontend/src/widgets/primitives/AppHostWidget.tsx

@@ -42,7 +42,10 @@ export const AppHostWidget: React.FC<AppHostWidgetProps> = ({ appId, appArgs, pa
   return (
     <div ref={containerRef} className="w-full h-full p-4 overflow-y-auto">
       <ErrorBoundary>
-        <BreakpointProvider>
+        {/* Derive the breakpoint from the app content container (sidebar-aware) rather
+            than the viewport, so progressive-collapse layouts react to the width
+            actually available to the app. */}
+        <BreakpointProvider containerRef={containerRef}>
           <EventHandlerProvider eventHandler={eventHandler}>
             <StreamHandlerProvider subscribeToStream={subscribeToStream}>
               <>{renderWidgetTree(widgetTree || loadingState())}</>