---
estimated_steps: 12
estimated_files: 1
skills_used: []
---

# T01: Add hover-to-open with matchMedia guard and leave delay to AdminDropdown

Add onMouseEnter/onMouseLeave handlers to the AdminDropdown container div. Guard them with a matchMedia('(min-width: 769px)') ref so hover only fires on desktop. Use a 150ms setTimeout on mouseleave (cleared on re-enter) to bridge the 0.5rem CSS gap between trigger and menu. Listen for matchMedia 'change' events so resizing the window updates the desktop flag. Keep click-to-toggle, Escape close, and outside-click close intact.

The component is at `frontend/src/components/AdminDropdown.tsx` (65 lines). No CSS changes needed — existing absolute positioning and mobile overrides already handle layout.

This satisfies R036 (Admin Dropdown Hover on Desktop).

Steps:
1. Read `frontend/src/components/AdminDropdown.tsx` to confirm current state.
2. Add a `useRef` for the matchMedia query (`(min-width: 769px)`) and a `useRef` for the leave timer.
3. Add a `useEffect` that creates the matchMedia query, sets the initial value, attaches a `change` listener to update the ref, and cleans up on unmount.
4. Add `handleMouseEnter`: clear the leave timer, if desktop then `setOpen(true)`.
5. Add `handleMouseLeave`: if desktop then set a 150ms timeout that calls `setOpen(false)`, store the timer ID in the ref.
6. Add a cleanup `useEffect` that clears the leave timer on unmount.
7. Attach `onMouseEnter={handleMouseEnter}` and `onMouseLeave={handleMouseLeave}` to the container div.
8. Run `cd frontend && npm run build` to verify no TypeScript errors.

## Inputs

- ``frontend/src/components/AdminDropdown.tsx` — existing component to modify`

## Expected Output

- ``frontend/src/components/AdminDropdown.tsx` — updated with hover handlers, matchMedia guard, and leave delay`

## Verification

cd frontend && npm run build 2>&1 | tail -5
