Fix mobile keyboard causing drawer layout to break (#226)

Use svh instead of dvh for drawer max-height so the drawer stays stable
when the mobile keyboard opens (dvh shrinks with the visual viewport).
Add handleOnly to Vaul drawer so form scrolling doesn't accidentally
dismiss the drawer.

https://claude.ai/code/session_012VxAku4ep8JjdDU2yQotRf

Co-authored-by: Claude <noreply@anthropic.com>

Author: prazgaitis

apps/web/components/ui/responsive-dialog.tsx

@@ -85,7 +85,7 @@ function ResponsiveDialog({
   if (isMobile) {
     return (
       <ResponsiveDialogContext.Provider value={{ isMobile: true }}>
-        <Drawer open={open} onOpenChange={onOpenChange}>
+        <Drawer open={open} onOpenChange={onOpenChange} handleOnly>
           {children}
         </Drawer>
       </ResponsiveDialogContext.Provider>
@@ -122,7 +122,7 @@ function ResponsiveDialogContent({
 
   if (isMobile) {
     return (
-      <DrawerContent className={cn("max-h-[96dvh]", className)}>
+      <DrawerContent className={cn("max-h-[96svh]", className)}>
         {children}
       </DrawerContent>
     );

tasks/fix-mobile-keyboard-layout.md

@@ -0,0 +1,27 @@
+# Fix Mobile Keyboard Layout Issues in Activity Log Drawer
+
+**Date:** 2026-03-16
+
+## Problem
+
+When logging a new activity on mobile, opening the keyboard causes the responsive dialog (Vaul drawer) layout to break. The drawer resizes when the keyboard appears and doesn't properly restore when the keyboard is dismissed.
+
+## Root Cause
+
+The `DrawerContent` in `responsive-dialog.tsx` uses `max-h-[96dvh]` (dynamic viewport height). On mobile:
+- `dvh` shrinks when the virtual keyboard opens (it tracks the visual viewport)
+- This causes the drawer to collapse/resize, pushing content around
+- When the keyboard dismisses, the resize animation is janky and doesn't fully recover
+
+Additionally, the Vaul drawer allows swipe-to-dismiss from anywhere inside the content, which conflicts with scrolling the form.
+
+## Solution
+
+- [x] Change `max-h-[96dvh]` to `max-h-[96svh]` — `svh` (small viewport height) stays stable regardless of keyboard state
+- [x] Add `handleOnly` prop to the Vaul Drawer so only the drag handle triggers dismiss, not form scrolling
+
+## Implementation Notes
+
+- `svh` is the smallest viewport height (accounts for browser chrome but NOT the keyboard)
+- The browser natively scrolls focused inputs into view above the keyboard
+- `handleOnly` prevents accidental drawer dismissal when users scroll the activity form