feat: add mobile compatibility

- Add responsive hamburger menu with all header actions (MobileMenu)
- Annotation panel renders as full-screen overlay on mobile with backdrop and close button
- Panel starts closed on mobile (<768px)
- Touch support for resize handles, pinpoint annotations, and toolstrip buttons
- Mobile text selection creates annotations via highlighter.fromRange() bridge
- Card action buttons always visible on touch devices (hover:none media query)
- Settings modal uses horizontal tab bar on mobile
- CommentPopover width capped to viewport on small screens
- Replace mousedown with pointerdown for touch-compatible click-outside handling
- Add useIsMobile reactive hook for breakpoint detection
- Desktop layout (>=768px) unchanged

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

Author: grubmanItay

packages/editor/App.tsx

@@ -3,6 +3,7 @@ import { Annotation, AnnotationType, Block, type EditorAnnotation } from '../typ
 import { isCurrentUser } from '../utils/identity';
 import { ImageThumbnail } from './ImageThumbnail';
 import { EditorAnnotationCard } from './EditorAnnotationCard';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 interface PanelProps {
   isOpen: boolean;
@@ -17,6 +18,7 @@ interface PanelProps {
   width?: number;
   editorAnnotations?: EditorAnnotation[];
   onDeleteEditorAnnotation?: (id: string) => void;
+  onClose?: () => void;
 }
 
 export const AnnotationPanel: React.FC<PanelProps> = ({
@@ -32,7 +34,9 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   width,
   editorAnnotations,
   onDeleteEditorAnnotation,
+  onClose,
 }) => {
+  const isMobile = useIsMobile();
   const [copied, setCopied] = useState(false);
   const listRef = useRef<HTMLDivElement>(null);
   const sortedAnnotations = [...annotations].sort((a, b) => a.createdA - b.createdA);
@@ -60,17 +64,35 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
 
   if (!isOpen) return null;
 
-  return (
-    <aside className="border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col flex-shrink-0" style={{ width: width ?? 288 }}>
+  const panel = (
+    <aside
+      className={`border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col flex-shrink-0 ${
+        isMobile ? 'fixed inset-y-12 right-0 z-[60] w-full max-w-sm shadow-2xl bg-card' : ''
+      }`}
+      style={isMobile ? undefined : { width: width ?? 288 }}
+    >
       {/* Header */}
       <div className="p-3 border-b border-border/50">
         <div className="flex items-center justify-between">
           <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             Annotations
           </h2>
-          <span className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
-            {totalCount}
-          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
+              {totalCount}
+            </span>
+            {isMobile && onClose && (
+              <button
+                onClick={onClose}
+                className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                title="Close panel"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
         </div>
       </div>
 
@@ -148,6 +170,20 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
       )}
     </aside>
   );
+
+  if (isMobile) {
+    return (
+      <>
+        <div
+          className="fixed inset-0 z-[59] bg-background/60 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        {panel}
+      </>
+    );
+  }
+
+  return panel;
 };
 
 function formatTimestamp(ts: number): string {
@@ -321,7 +357,7 @@ const AnnotationCard: React.FC<{
             {formatTimestamp(annotation.createdA)}
           </span>
         </div>
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 transition-all">
           {onEdit && annotation.type !== AnnotationType.DELETION && !isEditing && (
             <button
               onClick={handleStartEdit}

packages/ui/components/AnnotationPanel.tsx

@@ -28,7 +28,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
 
   return (
     <>
-      <div className="flex items-center gap-1.5">
+      <div className="flex items-center gap-1.5 flex-wrap">
         {/* Input method group */}
         <div className="inline-flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5 border border-border/30">
           <ToolstripButton
@@ -109,7 +109,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
         {/* Help */}
         <button
           onClick={() => setShowHelp(true)}
-          className="ml-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors"
+          className="ml-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors hidden sm:block"
         >
           how does this work?
         </button>
@@ -229,6 +229,7 @@ const ToolstripButton: React.FC<{
   const [labelWidth, setLabelWidth] = useState(0);
   const measureRef = useRef<HTMLSpanElement>(null);
   const styles = colorStyles[color];
+  const [isTouchDevice] = useState(() => 'ontouchstart' in window || navigator.maxTouchPoints > 0);
 
   // Measure label text width synchronously before first paint
   useLayoutEffect(() => {
@@ -237,7 +238,7 @@ const ToolstripButton: React.FC<{
     }
   }, [label]);
 
-  const expanded = active || hovered;
+  const expanded = active || hovered || isTouchDevice;
   const expandedWidth = H_PAD + ICON_INNER + GAP + labelWidth + H_PAD;
   const currentWidth = expanded ? expandedWidth : ICON_SIZE;
 

packages/ui/components/AnnotationToolstrip.tsx

@@ -18,21 +18,22 @@ interface CommentPopoverProps {
   onClose: () => void;
 }
 
-const POPOVER_WIDTH = 384;
+const MAX_POPOVER_WIDTH = 384;
 const GAP = 8;
 
-function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean } {
+function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean; width: number } {
   const spaceBelow = window.innerHeight - anchorRect.bottom;
   const flipAbove = spaceBelow < 280;
+  const width = Math.min(MAX_POPOVER_WIDTH, window.innerWidth - 32);
 
   const top = flipAbove
     ? anchorRect.top - GAP
     : anchorRect.bottom + GAP;
 
-  let left = anchorRect.left + anchorRect.width / 2 - POPOVER_WIDTH / 2;
-  left = Math.max(16, Math.min(left, window.innerWidth - POPOVER_WIDTH - 16));
+  let left = anchorRect.left + anchorRect.width / 2 - width / 2;
+  left = Math.max(16, Math.min(left, window.innerWidth - width - 16));
 
-  return { top, left, flipAbove };
+  return { top, left, flipAbove, width };
 }
 
 export const CommentPopover: React.FC<CommentPopoverProps> = ({
@@ -142,7 +143,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           style={{
             animation: 'comment-dialog-in 0.15s ease-out',
           }}
-          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
         >
           <style>{`
             @keyframes comment-dialog-in {
@@ -220,16 +221,17 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   return createPortal(
     <div
       ref={popoverRef}
-      className="fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl w-96 flex flex-col"
+      className="fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
       style={{
         top: position.top,
         left: position.left,
+        width: position.width,
         ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
         animation: position.flipAbove
           ? 'comment-popover-in-above 0.15s ease-out'
           : 'comment-popover-in 0.15s ease-out',
       }}
-      onMouseDown={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
     >
       <style>{`
         @keyframes comment-popover-in {

packages/ui/components/CommentPopover.tsx

@@ -27,7 +27,7 @@ export const EditorAnnotationCard: React.FC<EditorAnnotationCardProps> = ({ anno
         </div>
         <button
           onClick={(e) => { e.stopPropagation(); onDelete(); }}
-          className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all opacity-0 group-hover:opacity-100"
+          className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
           title="Delete annotation"
         >
           <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>