fix: remove floating chat modal size caps (#4834)

Drop the floating chat min/max resize limits and preserve the chosen size unless the viewport shrinks.

Author: ComputelessComputer

apps/desktop/src/chat/components/persistent-chat.tsx

@@ -8,6 +8,47 @@ import { ChatView } from "./chat-panel";
 
 import { useShell } from "~/contexts/shell";
 
+const FLOATING_CHAT_PADDING_PX = 32;
+const FLOATING_CHAT_MIN_WIDTH_PX = 320;
+const FLOATING_CHAT_MIN_HEIGHT_PX = 400;
+const DEFAULT_FLOATING_CHAT_WIDTH_PX = 400;
+const DEFAULT_FLOATING_CHAT_HEIGHT_RATIO = 0.7;
+
+function getFloatingViewportSize() {
+  return {
+    width: Math.max(window.innerWidth - FLOATING_CHAT_PADDING_PX, 1),
+    height: Math.max(window.innerHeight - FLOATING_CHAT_PADDING_PX, 1),
+  };
+}
+
+function clampFloatingSize(size: { width: number; height: number }) {
+  const viewport = getFloatingViewportSize();
+
+  return {
+    width: Math.min(
+      Math.max(
+        size.width,
+        Math.min(FLOATING_CHAT_MIN_WIDTH_PX, viewport.width),
+      ),
+      viewport.width,
+    ),
+    height: Math.min(
+      Math.max(
+        size.height,
+        Math.min(FLOATING_CHAT_MIN_HEIGHT_PX, viewport.height),
+      ),
+      viewport.height,
+    ),
+  };
+}
+
+function getDefaultFloatingSize() {
+  return clampFloatingSize({
+    width: DEFAULT_FLOATING_CHAT_WIDTH_PX,
+    height: window.innerHeight * DEFAULT_FLOATING_CHAT_HEIGHT_RATIO,
+  });
+}
+
 export function PersistentChatPanel({
   panelContainerRef,
 }: {
@@ -20,10 +61,7 @@ export function PersistentChatPanel({
   const isVisible = isFloating || isPanel;
 
   const [hasBeenOpened, setHasBeenOpened] = useState(false);
-  const [floatingSize, setFloatingSize] = useState({
-    width: 400,
-    height: window.innerHeight * 0.7,
-  });
+  const [floatingSize, setFloatingSize] = useState(getDefaultFloatingSize);
   const [panelRect, setPanelRect] = useState<DOMRect | null>(null);
   const observerRef = useRef<ResizeObserver | null>(null);
 
@@ -33,20 +71,6 @@ export function PersistentChatPanel({
     }
   }, [isVisible, hasBeenOpened]);
 
-  useEffect(() => {
-    if (!isFloating) return;
-
-    const handleResize = () => {
-      setFloatingSize((prev) => ({
-        ...prev,
-        height: window.innerHeight * 0.7,
-      }));
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [isFloating]);
-
   useHotkeys(
     "esc",
     () => chat.sendEvent({ type: "CLOSE" }),
@@ -133,10 +157,12 @@ export function PersistentChatPanel({
         onResizeStop={
           isFloating
             ? (_, __, ___, d) => {
-                setFloatingSize((prev) => ({
-                  width: prev.width + d.width,
-                  height: prev.height + d.height,
-                }));
+                setFloatingSize((prev) =>
+                  clampFloatingSize({
+                    width: prev.width + d.width,
+                    height: prev.height + d.height,
+                  }),
+                );
               }
             : undefined
         }
@@ -154,11 +180,10 @@ export function PersistentChatPanel({
               }
             : false
         }
-        minWidth={isFloating ? 320 : undefined}
-        minHeight={isFloating ? 400 : undefined}
-        maxWidth={isFloating ? window.innerWidth - 32 : undefined}
-        maxHeight={isFloating ? window.innerHeight - 32 : undefined}
+        minWidth={isFloating ? FLOATING_CHAT_MIN_WIDTH_PX : undefined}
+        minHeight={isFloating ? FLOATING_CHAT_MIN_HEIGHT_PX : undefined}
         bounds={isFloating ? "window" : undefined}
+        boundsByDirection={isFloating}
         className={cn([
           "pointer-events-auto flex min-h-0 min-w-0 flex-col overflow-hidden",
           isFloating && [