rock/riotpiao.com
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move resize handle to top-left corner (anchored bottom-right)
Build & Push Portfolio Image / build-push (push) Successful in 2m47s
Details

Browse Source
This commit is contained in:
Story Crater Bot
2026-09-01 11:25:09 -07:00
parent 47dd6aee9e
commit 44ecc6416d
1 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/InteractiveTerminal.tsx
+14 -9
View File
@@ -112,7 +112,7 @@ export function InteractiveTerminal() {
if (isOpen) inputRef.current?.focus() if (isOpen) inputRef.current?.focus()
}, [isOpen]) }, [isOpen])
// Handle terminal resize // Handle terminal resize (drag top-left, anchored bottom-right)
useEffect(() => { useEffect(() => {
const handleMouseMove = (e: MouseEvent) => { const handleMouseMove = (e: MouseEvent) => {
if (!isResizing) return if (!isResizing) return
@@ -120,8 +120,8 @@ export function InteractiveTerminal() {
if (!container) return if (!container) return
const rect = container.getBoundingClientRect() const rect = container.getBoundingClientRect()
const newWidth = Math.max(320, e.clientX - rect.left) const newWidth = Math.max(320, rect.right - e.clientX)
const newHeight = Math.max(300, e.clientY - rect.top) const newHeight = Math.max(300, rect.bottom - e.clientY)
setWidth(newWidth) setWidth(newWidth)
setHeight(newHeight) setHeight(newHeight)
@@ -338,18 +338,23 @@ export function InteractiveTerminal() {
</div> </div>
</div> </div>
{/* Resize handle */} {/* Resize handle — top-left corner */}
<div <div
ref={resizeHandleRef} ref={resizeHandleRef}
onMouseDown={() => setIsResizing(true)} onMouseDown={() => setIsResizing(true)}
className={`absolute bottom-0 right-0 w-4 h-4 cursor-se-resize ${ className={`absolute top-0 left-0 w-4 h-4 cursor-nw-resize ${
isDark ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-300 hover:bg-gray-400' isDark ? 'hover:bg-gray-600' : 'hover:bg-gray-400'
} transition-colors`} } transition-colors z-10`}
style={{ style={{
borderBottomRightRadius: 'inherit', borderTopLeftRadius: 'inherit',
opacity: isResizing ? 1 : 0.5, 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>
)} )}
</motion.div> </motion.div>