Commit 42e1a0fba2938bd56761db63f466962342d7b779 | the-knife

author	maria <maria@kuuro.net> 2026-10-09 22:51:36-03:00
committer	GitHub <noreply@github.com> 2026-10-09 22:51:36-03:00
log	42e1a0fba2938bd56761db63f466962342d7b779
tree	c11e1b620e4eb84fc4dd4f03248be5c07ecb41cd
parent	ca40de081c3ab087cd6458ce9bef12e43c5a7233
signature	Signed by PGP key B5690EEEBB952194

fix(web): terminal drawer keeps its height after the window shrinks (#17658)

1 files changed, 39 insertions(+), 23 deletions(-)

apps
- web
  - src
    components
    ThreadTerminalDrawer.tsx

apps/web/src/components/ThreadTerminalDrawer.tsx+39-23

 @@ -104,9 +104,8 @@ function maxDrawerHeight(): number {
   return Math.max(MIN_DRAWER_HEIGHT, Math.floor(window.innerHeight * MAX_DRAWER_HEIGHT_RATIO));
 }
-function clampDrawerHeight(height: number): number {
+function clampDrawerHeight(height: number, maxHeight = maxDrawerHeight()): number {
   const safeHeight = Number.isFinite(height) ? height : DEFAULT_THREAD_TERMINAL_HEIGHT;
-  const maxHeight = maxDrawerHeight();
   return Math.min(Math.max(Math.round(safeHeight), MIN_DRAWER_HEIGHT), maxHeight);
 }
 @@ -1181,13 +1180,16 @@ export default function ThreadTerminalDrawer({
     false,
     Schema.Boolean,
   );
-  const controlledDrawerHeight = clampDrawerHeight(height);
+  // The stored height is the user's preference; the window only clamps what renders.
+  const controlledDrawerHeight = height;
+  const [windowMaxDrawerHeight, setWindowMaxDrawerHeight] = useState(maxDrawerHeight);
   const [drawerHeightState, setDrawerHeightState] = useState(() => ({
     threadId,
     height: controlledDrawerHeight,
   }));
-  const drawerHeight =
+  const preferredDrawerHeight =
     drawerHeightState.threadId === threadId ? drawerHeightState.height : controlledDrawerHeight;
+  const drawerHeight = clampDrawerHeight(preferredDrawerHeight, windowMaxDrawerHeight);
   const setDrawerHeight = useCallback(
     (update: SetStateAction<number>) => {
       setDrawerHeightState((current) => {
 @@ -1201,11 +1203,9 @@ export default function ThreadTerminalDrawer({
     },
     [controlledDrawerHeight, threadId],
   );
-  const setDrawerHeightFromWindowResize = useEffectEvent((nextHeight: number) => {
-    setDrawerHeight(nextHeight);
-  });
   const [resizeEpoch, setResizeEpoch] = useState(0);
   const drawerHeightRef = useRef(drawerHeight);
+  const preferredDrawerHeightRef = useRef(preferredDrawerHeight);
   const lastSyncedHeightRef = useRef(controlledDrawerHeight);
   const onHeightChangeRef = useRef(onHeightChange);
   const resizeStateRef = useRef<{
 @@ -1395,15 +1395,24 @@ export default function ThreadTerminalDrawer({
     onHeightChangeRef.current = onHeightChange;
   }, [onHeightChange]);
-  useEffect(() => {
+  useLayoutEffect(() => {
+    // A render mid-drag (the window cap moved) must not replace the live height.
+    const resizeState = resizeStateRef.current;
+    if (resizeState) {
+      resizeState.drawer?.style.setProperty("height", `${drawerHeightRef.current}px`);
+      return;
+    }
     drawerHeightRef.current = drawerHeight;
   }, [drawerHeight]);
+  useEffect(() => {
+    preferredDrawerHeightRef.current = preferredDrawerHeight;
+  }, [preferredDrawerHeight]);
   const syncHeight = useCallback((nextHeight: number) => {
-    const clampedHeight = clampDrawerHeight(nextHeight);
+    if (lastSyncedHeightRef.current === nextHeight) return;
-    if (lastSyncedHeightRef.current === clampedHeight) return;
+    lastSyncedHeightRef.current = nextHeight;
-    lastSyncedHeightRef.current = clampedHeight;
+    onHeightChangeRef.current(nextHeight);
-    onHeightChangeRef.current(clampedHeight);
   }, []);
   useEffect(() => {
 @@ -1448,7 +1457,14 @@ export default function ThreadTerminalDrawer({
       if (event.currentTarget.hasPointerCapture(event.pointerId)) {
         event.currentTarget.releasePointerCapture(event.pointerId);
       }
-      if (!didResizeDuringDragRef.current) {
+      // A drag that ends where it started keeps the stored preference, which may
+      // be taller than the window-capped height the drag started from.
+      if (!didResizeDuringDragRef.current || drawerHeightRef.current === resizeState.startHeight) {
+        // React skips the write when the rendered height did not change, so put
+        // back the preference as the current window caps it.
+        const renderedHeight = clampDrawerHeight(preferredDrawerHeightRef.current);
+        drawerHeightRef.current = renderedHeight;
+        resizeState.drawer?.style.setProperty("height", `${renderedHeight}px`);
         return;
       }
       setDrawerHeight(drawerHeightRef.current);
 @@ -1464,33 +1480,33 @@ export default function ThreadTerminalDrawer({
     }
     const onWindowResize = () => {
-      const clampedHeight = clampDrawerHeight(drawerHeightRef.current);
+      // React only renders the stored preference, so clamp a live drag height here.
-      const changed = clampedHeight !== drawerHeightRef.current;
+      const resizeState = resizeStateRef.current;
-      if (changed) {
+      const liveHeight = clampDrawerHeight(drawerHeightRef.current);
-        setDrawerHeightFromWindowResize(clampedHeight);
+      if (resizeState && liveHeight !== drawerHeightRef.current) {
-        drawerHeightRef.current = clampedHeight;
+        drawerHeightRef.current = liveHeight;
-      }
+        resizeState.drawer?.style.setProperty("height", `${liveHeight}px`);
-      if (!resizeStateRef.current) {
-        syncHeight(clampedHeight);
       }
+      setWindowMaxDrawerHeight(maxDrawerHeight());
       setResizeEpoch((value) => value + 1);
     };
     window.addEventListener("resize", onWindowResize);
     return () => {
       window.removeEventListener("resize", onWindowResize);
     };
-  }, [syncHeight, visible]);
+  }, [visible]);
   useEffect(() => {
     if (!visible) {
       return;
     }
+    setWindowMaxDrawerHeight(maxDrawerHeight());
     setResizeEpoch((value) => value + 1);
   }, [visible]);
   useEffect(() => {
     return () => {
-      syncHeight(drawerHeightRef.current);
+      syncHeight(preferredDrawerHeightRef.current);
     };
   }, [syncHeight]);