feat: add mobile compatibility

[grubmanItay]

Summary

• Hamburger menu replaces header buttons on mobile (<768px)
• Annotation panel renders as a full-screen overlay with backdrop and close button
• Touch support for resize handles, pinpoint annotations, text selection, and toolstrip
• Card action buttons are always visible on touch devices (no hover needed)
• Settings modal uses horizontal tab bar on mobile
• CommentPopover width capped to viewport
• Desktop layout (>=768px) completely unchanged

Files Changed

• New: useIsMobile hook, MobileMenu component
• Modified: App.tsx, AnnotationPanel, AnnotationToolstrip, CommentPopover, EditorAnnotationCard, ModeToggle, ResizeHandle, Settings, Viewer, usePinpoint, useResizablePanel

Test plan

• Desktop (>768px): verify no visual changes, all functionality works
• Mobile (<768px): Chrome DevTools device toolbar
  • Panel starts closed
  • Hamburger menu shows all options
  • Panel opens as overlay with backdrop
  • Toolstrip labels visible without hover
  • Card edit/delete buttons visible without hover
  • Text selection creates annotations
  • Pinpoint tap-to-annotate works
  • Settings modal renders with horizontal tabs
  • CommentPopover fits screen width

🤖 Generated with Claude Code

[backnotprop]

Ah this was on the todo list, great stuff

[backnotprop]

Code review

Found 1 issue:

1. Mobile backdrop (z-[59]) covers the sticky header (z-[50]), blocking header controls while the annotation panel is open. The backdrop uses fixed inset-0 which spans the full viewport including the header area. Since z-[59] > z-[50], the backdrop renders on top of the header, preventing access to the logo, hamburger menu, and other header buttons. Users can only dismiss the panel via the backdrop click or X button — they cannot interact with any header controls. Either the backdrop z-index should be lower than the header, or the header z-index should be raised above the backdrop.

plannotator/packages/editor/App.tsx

Lines 1134 to 1136 in a2c9776

	{/* Minimal Header */}
	<header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl sticky top-0 z-[50]">
	<div className="flex items-center gap-2 md:gap-3">

plannotator/packages/ui/components/AnnotationPanel.tsx

Lines 177 to 179 in a2c9776

	<div
	className="fixed inset-0 z-[59] bg-background/60 backdrop-blur-sm"
	onClick={onClose}

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[backnotprop]

I'll review these before you need to address anything.

[backnotprop]

Reviewing PR's now. Have a fun new tool to support...

[grubmanItay]

There is a UI bug: while selecting text, the default context menu (cut/copy/paste) pops up and overlaps the icon row.

I will handle this later.