From bed7cc9d90f0f7fd5c1cc9f2aabe5adc503d4caa Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 5 Apr 2026 21:01:34 -0700
Subject: [PATCH] [eric] fix browser card interaction, URL bar focus, zoom to
 80%

---
 .../src/app/pages/Dashboard/BrowserCard.tsx   | 26 +++----------------
 .../src/app/pages/Dashboard/Dashboard.tsx     |  2 +-
 .../app/pages/Dashboard/useCanvasControls.ts  |  5 ++--
 3 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/BrowserCard.tsx
index 2e360659..5ac48ec0 100644
--- a/frontend/src/app/pages/Dashboard/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/BrowserCard.tsx
@@ -632,26 +632,7 @@ const BrowserCard: React.FC<Props> = ({
         }),
       }}
     >
-      {/* Selection overlay – blocks click interaction while selected, enabling drag from anywhere */}
-      {isSelected && (
-        <Box
-          ref={scrollOverlayRef}
-          onPointerDown={handleDragPointerDown}
-          onPointerMove={handleDragPointerMove}
-          onPointerUp={handleDragPointerUp}
-          onClick={(e: React.MouseEvent) => {
-            if (justDraggedRef.current) return;
-            onCardSelect?.(browserId, 'browser', e.shiftKey);
-          }}
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            zIndex: 15,
-            cursor: isDragging ? 'grabbing' : 'grab',
-            touchAction: 'none',
-          }}
-        />
-      )}
+      {/* Selection overlay – only covers header area so webview stays interactive */}
 
       {/* Rotating gradient border glow for element selection / streaming */}
       {showGlow && !agentActive && (
@@ -988,6 +969,7 @@ const BrowserCard: React.FC<Props> = ({
             onChange={(e) => setUrlBarValue(e.target.value)}
             onKeyDown={handleUrlKeyDown}
             onPointerDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
             onFocus={(e) => (e.target as HTMLInputElement).select()}
             placeholder="Search Google or enter URL..."
             sx={{
@@ -1020,10 +1002,10 @@ const BrowserCard: React.FC<Props> = ({
       {/* ====== Browser body — multiple webviews stacked ====== */}
       <Box sx={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
         {isElementSelectMode && (
-          <Box sx={{ position: 'absolute', inset: 0, zIndex: 10 }} />
+          <Box sx={{ position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none' }} />
         )}
         {cmdHeld && !isSelected && (
-          <Box sx={{ position: 'absolute', inset: 0, zIndex: 12 }} />
+          <Box sx={{ position: 'absolute', inset: 0, zIndex: 12, pointerEvents: 'none' }} />
         )}
         {isElectron ? (
           tabs.map((tab) => (
diff --git a/frontend/src/app/pages/Dashboard/Dashboard.tsx b/frontend/src/app/pages/Dashboard/Dashboard.tsx
index 889a4ec2..83af8bcf 100644
--- a/frontend/src/app/pages/Dashboard/Dashboard.tsx
+++ b/frontend/src/app/pages/Dashboard/Dashboard.tsx
@@ -337,7 +337,7 @@ const DashboardInner: React.FC = () => {
     setFocusedCardId(id);
     setTimeout(() => {
       const rect = getCardRect(id, type);
-      if (rect) canvas.actions.fitToCards([rect], 1.15, true);
+      if (rect) canvas.actions.fitToCards([rect], 1.15, true, type === 'browser' ? 0.8 : undefined);
       setTimeout(() => (document.activeElement as HTMLElement)?.blur?.(), 150);
     }, 100);
   }, [selection, getCardRect, canvas.actions, dispatch, expandedSessionIds]);
diff --git a/frontend/src/app/pages/Dashboard/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/useCanvasControls.ts
index 11407df1..f6b1e3c6 100644
--- a/frontend/src/app/pages/Dashboard/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/useCanvasControls.ts
@@ -443,7 +443,7 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
     animateTo({ panX: newPanX, panY: newPanY, zoom: newZoom });
   }, [animateTo]);
 
-  const fitToCards = useCallback((cardRects: Array<{ x: number; y: number; width: number; height: number }>, maxZoom?: number, animate?: boolean) => {
+  const fitToCards = useCallback((cardRects: Array<{ x: number; y: number; width: number; height: number }>, maxZoom?: number, animate?: boolean, minZoom?: number) => {
     cancelAnimation();
 
     const viewport = viewportRef.current;
@@ -472,7 +472,8 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
     const availW = vRect.width - FIT_PADDING * 2;
     const availH = vRect.height - FIT_PADDING * 2;
     const ceiling = maxZoom ?? MAX_ZOOM;
-    const targetZoom = clamp(Math.min(availW / contentWidth, availH / contentHeight), MIN_ZOOM, ceiling);
+    const floor = minZoom ?? MIN_ZOOM;
+    const targetZoom = clamp(Math.min(availW / contentWidth, availH / contentHeight), floor, ceiling);
     const targetPanX = (vRect.width - contentWidth * targetZoom) / 2 - minX * targetZoom;
     // For single cards, position near top of viewport (80px padding) instead of dead center
     const topBiased = cardRects.length === 1;