feat: implement 6 research-backed mobile responsive features

- Bottom sheet for mobile tool settings (replaces top-collapsible panel)
- Pinch-to-zoom and wheel zoom on image viewer via @use-gesture/react
- Replace all vh units with dvh for dynamic viewport height
- Vertical before-after comparison on mobile devices
- Konva multi-touch pinch-to-zoom on editor canvas
- Container queries for adaptive tool settings + touch-friendly CSS

apps/web/src/components/tools/crop-canvas.tsx

@@ -111,7 +111,7 @@ export function CropCanvas({
             src={imageSrc}
             alt="Crop preview"
             onLoad={handleImageLoad}
-            className="max-w-full max-h-[calc(100vh-12rem)] select-none"
+            className="max-w-full max-h-[calc(100dvh-12rem)] select-none"
             draggable={false}
           />
         </ReactCrop>

apps/web/src/components/tools/resize-settings.tsx

@@ -202,7 +202,7 @@ export function ResizeControls({ settings: initialSettings, onChange }: ResizeCo
 
       {/* Presets tab */}
       {tab === "presets" && (
-        <div className="space-y-3 max-h-[50vh] overflow-y-auto pe-1">
+        <div className="space-y-3 max-h-[50dvh] overflow-y-auto pe-1">
           {platforms.map((platform) => (
             <div key={platform}>
               <p className="text-xs font-medium text-muted-foreground mb-1.5">{platform}</p>

apps/web/src/components/tools/smart-crop-settings.tsx

@@ -296,7 +296,7 @@ export function SmartCropControls({ settings: initialSettings, onChange }: Smart
           </div>
 
           {subjectTab === "presets" ? (
-            <div className="space-y-3 max-h-[50vh] overflow-y-auto pe-1">
+            <div className="space-y-3 max-h-[50dvh] overflow-y-auto pe-1">
               {platforms.map((platform) => (
                 <div key={platform}>
                   <p className="text-xs font-medium text-muted-foreground mb-1.5">{platform}</p>