[Refactor] Replace hand-rolled overlay logic with useOverlay hook

[samzong]

Summary

Replace duplicated overlay infrastructure (scroll lock, focus trap, escape handling, body overflow) across BottomSheet and DrawerLayout with a single useOverlay hook. All overlays now render through portals, fixing stacking context fragility and adding proper inert, reduced-motion support, and iOS-safe scroll lock.

Type of change

• [Refactor] internal cleanup

Why is this needed?

The prior BottomSheet and DrawerLayout each hand-rolled identical overlay logic with known defects:

1. No portal — position: fixed breaks under ancestor transform/will-change/filter
2. Broken scroll lock — document.body.style.overflow = "hidden" fails on iOS Safari and races when multiple overlays coexist
3. Global keydown listener — two open dialogs both handle the same keypress; requestAnimationFrame never cancelled on unmount
4. No inert — background content remains focusable and interactive to assistive technology
5. No prefers-reduced-motion — spring animations run regardless of user preference
6. Undefined CSS variable — --text-tertiary used in GatewayDebugLog but never defined

What changed?

• New hooks/useOverlay.ts: portal target, ref-counted scroll lock (iOS position:fixed + scrollY save/restore), inert on #root, scoped focus trap via onKeyDown on container, requestAnimationFrame cleanup, isConnected guard on focus restore, useReducedMotion from framer-motion
• Rewritten BottomSheet.tsx: delegates overlay concerns to useOverlay, renders via createPortal
• Refactored DrawerLayout.tsx: removed hand-written scroll lock effect (lines 40-49) and focus trap effect (lines 51-88), drawer now portals via useOverlay
• Added --text-tertiary: #838b97 to both dark and light themes in index.css

Architecture impact

• Owning layer: renderer (PWA)
• Cross-layer impact: none
• Invariants touched from docs/architecture-invariants.md: none
• Why those invariants remain protected: changes are scoped to PWA renderer overlay infrastructure only

Linked issues

Closes #

Validation

• pnpm lint
• pnpm test
• pnpm check:ui-contract
• pnpm check (full gate: lint + architecture + ui-contract + renderer-copy + i18n + dead-code + format + typecheck + test)
• Manual smoke test

Commands, screenshots, or notes:

pnpm check — all passed (157 tests, 0 failures)

Screenshots or recordings

No visual changes. Overlay behavior (animation, drag-to-dismiss, backdrop, escape) is identical. The only visible difference is --text-tertiary now resolves correctly in GatewayDebugLog (previously fell through to inherited color).

Release note

• No user-facing change. Release note is NONE.

NONE

Checklist

• The PR title uses at least one approved prefix: [Refactor]
• The summary explains both what changed and why
• Validation reflects the commands actually run for this PR
• Architecture impact is described and references any touched invariants
• Cross-layer changes are explicitly justified
• The release note block is accurate

[github-actions]

Hi @samzong,
Thanks for your pull request!
If the PR is ready, use the /auto-cc command to assign Reviewer to Review.
We will review it shortly.

Details

Instructions for interacting with me using comments are available here.
If you have questions or suggestions related to my behavior, please file an issue against the gh-ci-bot repository.