diff --git a/components/InteractiveTerminal.tsx b/components/InteractiveTerminal.tsx index 9cd6bc1..b47abd9 100644 --- a/components/InteractiveTerminal.tsx +++ b/components/InteractiveTerminal.tsx @@ -112,7 +112,7 @@ export function InteractiveTerminal() { if (isOpen) inputRef.current?.focus() }, [isOpen]) - // Handle terminal resize + // Handle terminal resize (drag top-left, anchored bottom-right) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing) return @@ -120,8 +120,8 @@ export function InteractiveTerminal() { if (!container) return const rect = container.getBoundingClientRect() - const newWidth = Math.max(320, e.clientX - rect.left) - const newHeight = Math.max(300, e.clientY - rect.top) + const newWidth = Math.max(320, rect.right - e.clientX) + const newHeight = Math.max(300, rect.bottom - e.clientY) setWidth(newWidth) setHeight(newHeight) @@ -338,18 +338,23 @@ export function InteractiveTerminal() { - {/* Resize handle */} + {/* Resize handle — top-left corner */}
setIsResizing(true)} - className={`absolute bottom-0 right-0 w-4 h-4 cursor-se-resize ${ - isDark ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-300 hover:bg-gray-400' - } transition-colors`} + className={`absolute top-0 left-0 w-4 h-4 cursor-nw-resize ${ + isDark ? 'hover:bg-gray-600' : 'hover:bg-gray-400' + } transition-colors z-10`} style={{ - borderBottomRightRadius: 'inherit', + borderTopLeftRadius: 'inherit', opacity: isResizing ? 1 : 0.5, }} - /> + > + + + + +
)}