[eric] chat: docked mini cards are inert previews; drag from anywhere on the body, clicks stop leaking into the live page, wheel scrolls the transcript (ENG-348)

This commit is contained in:
ciregenz
2026-08-18 19:12:36 -07:00
parent 88d6c536cd
commit 4c2db3bbb1
2 changed files with 34 additions and 0 deletions
@@ -1612,6 +1612,23 @@ const BrowserCard: React.FC<Props> = ({
{findOpen && !suspendedSnap && (
<BrowserFindBar browserId={browserId} focusSignal={findFocusSignal} onClose={() => setFindOpen(false)} />
)}
{/* Docked in chat = inert preview (ENG-348): body clicks can't reach the page, drag works from anywhere, wheel scrolls the transcript. Header (z16) keeps its controls. */}
{dockActive && (
<Box
onPointerDown={handleDragPointerDown}
onPointerMove={handleDragPointerMove}
onPointerUp={handleDragPointerUp}
onPointerCancel={abortDrag}
onLostPointerCapture={abortDrag}
onWheel={(e) => {
e.stopPropagation();
let el = document.querySelector(`[data-browser-slot="${dockedTo}"]`) as HTMLElement | null;
while (el && el.scrollHeight <= el.clientHeight + 1) el = el.parentElement;
if (el) el.scrollTop += e.deltaY;
}}
sx={{ position: 'absolute', inset: 0, zIndex: 15, cursor: 'grab', '&:active': { cursor: 'grabbing' } }}
/>
)}
{isElementSelectMode && (
<Box sx={{ position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none' }} />
)}
@@ -875,6 +875,23 @@ const DashboardViewCard: React.FC<Props> = ({
{cmdHeld && !isSelected && (
<Box sx={{ position: 'absolute', inset: 0, zIndex: 12 }} />
)}
{/* Docked in chat = inert preview (ENG-348): body clicks can't reach the app, drag works from anywhere, wheel scrolls the transcript. */}
{dockActive && (
<Box
onPointerDown={handleDragPointerDown}
onPointerMove={handleDragPointerMove}
onPointerUp={handleDragPointerUp}
onPointerCancel={abortDrag}
onLostPointerCapture={abortDrag}
onWheel={(e) => {
e.stopPropagation();
let el = document.querySelector(`[data-browser-slot="${dockedTo}"]`) as HTMLElement | null;
while (el && el.scrollHeight <= el.clientHeight + 1) el = el.parentElement;
if (el) el.scrollTop += e.deltaY;
}}
sx={{ position: 'absolute', inset: 0, zIndex: 14, cursor: 'grab', '&:active': { cursor: 'grabbing' } }}
/>
)}
<DashboardOutputPreview
previewRef={previewRef}
output={output}