From 44ecc6416d10ae71b321c6d90590a09301f57dc2 Mon Sep 17 00:00:00 2001
From: Story Crater Bot <19826264+Riotpiaole@users.noreply.github.com>
Date: Tue, 1 Sep 2026 11:25:09 -0700
Subject: [PATCH] fix: move resize handle to top-left corner (anchored
 bottom-right)

---
 components/InteractiveTerminal.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

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() {
             </div>
           </div>
 
-          {/* Resize handle */}
+          {/* Resize handle — top-left corner */}
           <div
             ref={resizeHandleRef}
             onMouseDown={() => 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,
             }}
-          />
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" className="m-0.5 opacity-40">
+              <line x1="0" y1="10" x2="10" y2="0" stroke="currentColor" strokeWidth="1.5" />
+              <line x1="0" y1="6" x2="6" y2="0" stroke="currentColor" strokeWidth="1.5" />
+            </svg>
+          </div>
         </motion.div>
       )}
     </motion.div>