fix: context menu reposition after mount to prevent viewport overflow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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<HTMLDivElement>(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(
     <div
       ref={ref}