# S05: Admin Dropdown Hover on Desktop

**Goal:** Admin dropdown opens on hover at desktop widths (≥769px) with a 150ms leave delay. On mobile, hover is inert — tap still toggles.
**Demo:** After this: Admin dropdown opens on hover at desktop widths. On mobile, opens on tap.

## Tasks
- [x] **T01: Added hover-to-open with 150ms leave delay and matchMedia desktop guard (≥769px) 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.
  - Estimate: 20m
  - Files: frontend/src/components/AdminDropdown.tsx
  - Verify: cd frontend && npm run build 2>&1 | tail -5
