diff --git a/src/components/rooms/RoomContextMenu.tsx b/src/components/rooms/RoomContextMenu.tsx index fb8335c..d92be66 100644 --- a/src/components/rooms/RoomContextMenu.tsx +++ b/src/components/rooms/RoomContextMenu.tsx @@ -30,10 +30,6 @@ const HK_ITEMS: { status: HousekeepingStatus; label: string; icon: React.ReactNo export function RoomContextMenu({ room, x, y, onClose, onStatusChange, onHkStatusChange, onEdit }: RoomContextMenuProps) { const ref = useRef(null) - // Adjust position so menu doesn't go off screen - const menuX = Math.min(x, window.innerWidth - 220) - const menuY = Math.min(y, window.innerHeight - 280) - useEffect(() => { const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) onClose() @@ -41,9 +37,23 @@ export function RoomContextMenu({ room, x, y, onClose, onStatusChange, onHkStatu const keyHandler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() } document.addEventListener('mousedown', handler) document.addEventListener('keydown', keyHandler) + + // After mount, reposition if menu overflows viewport + if (ref.current) { + const rect = ref.current.getBoundingClientRect() + const overflowX = rect.right - window.innerWidth + 8 + const overflowY = rect.bottom - window.innerHeight + 8 + if (overflowX > 0) ref.current.style.left = `${rect.left - overflowX}px` + if (overflowY > 0) ref.current.style.top = `${rect.top - overflowY}px` + } + return () => { document.removeEventListener('mousedown', handler); document.removeEventListener('keydown', keyHandler) } }, [onClose]) + // Initial rough position (will be corrected after mount above) + const menuX = Math.min(x, window.innerWidth - 220) + const menuY = y + return createPortal(