From 99433fd39980605e32a9285cbbe4543b283aa0d0 Mon Sep 17 00:00:00 2001 From: ciregenz Date: Sun, 9 Aug 2026 11:47:27 -0700 Subject: [PATCH] [eric] canvas: window chrome homogenized (no separator, same surface as the body), app title centered, one exit affordance in fullscreen --- .../Dashboard/canvas/DashboardCanvas.tsx | 4 +- .../Dashboard/cards/DashboardViewCard.tsx | 53 ++++++++++--------- .../Workflows/app/WorkflowsAppContent.tsx | 2 +- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx index 3251298a..de4c7146 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx @@ -552,8 +552,8 @@ const DashboardCanvas: React.FC = ({ /> - {/* The one exit that survives everything: mouse events over a fullscreen webview go to the guest, so hover reveals and window-level Escape can both be unreachable; this pill is an embedder element painted above the guest and always clickable. */} - {fullscreenCardId && ( + {/* The one exit that survives everything: mouse events over a fullscreen webview go to the guest, so hover reveals and window-level Escape can both be unreachable; this pill is an embedder element painted above the guest and always clickable. App cards carry their own exit in the fullscreen bar, so they skip the pill (three exits read as clutter, Eric 2026-08-09). */} + {fullscreenCardId && !viewCards[fullscreenCardId] && ( dispatch(clearTiledCard(fullscreenCardId))} sx={{ diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx index f07dd8bb..b23eb0f7 100644 --- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx +++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx @@ -797,10 +797,8 @@ const DashboardViewCard: React.FC = ({ gap: 0.75, px: 1, py: 0.25, - // Fullscreen flips the bar to the dark edge-to-edge system-chrome treatment (Zen/Safari - // compact), so it reads as window chrome instead of a floating card fragment. - bgcolor: isFullscreen ? '#211d19' : c.bg.secondary, - borderBottom: `1px solid ${isFullscreen ? 'rgba(255,255,255,0.08)' : c.border.subtle}`, + // Homogenized with the card body: same surface, no separator, the content just starts (Eric's call; the dark fullscreen flip felt like a foreign strip). + bgcolor: c.bg.surface, cursor: isDragging ? 'grabbing' : 'grab', flexShrink: 0, minHeight: 28, @@ -810,25 +808,28 @@ const DashboardViewCard: React.FC = ({ e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}> handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} /> - - - {output.name} - {instance > 1 && ( - - #{instance} - - )} - + {/* Centered identity (Safari compact): the name floats over the bar's midpoint, not the corner. */} + + + + {output.name} + {instance > 1 && ( + + #{instance} + + )} + + + {showControls && ( <> @@ -846,7 +847,7 @@ const DashboardViewCard: React.FC = ({ }); }} onPointerDown={(e) => e.stopPropagation()} - sx={{ color: isFullscreen ? 'rgba(232,226,216,0.6)' : c.text.muted, p: 0.5, '&:hover': { color: isFullscreen ? '#fff' : c.text.primary } }} + sx={{ color: c.text.muted, p: 0.5, '&:hover': { color: c.text.primary } }} > @@ -862,7 +863,7 @@ const DashboardViewCard: React.FC = ({ role="button" onClick={(e) => { e.stopPropagation(); onTile('restore'); }} onPointerDown={(e) => e.stopPropagation()} - sx={{ flexShrink: 0, fontSize: '0.6875rem', fontWeight: 600, color: '#e8e2d8', bgcolor: 'rgba(255,255,255,0.1)', borderRadius: 999, px: 1.25, py: 0.35, cursor: 'pointer', '&:hover': { bgcolor: 'rgba(255,255,255,0.18)' } }} + sx={{ flexShrink: 0, fontSize: '0.6875rem', fontWeight: 600, color: c.text.secondary, bgcolor: `${c.text.primary}0d`, borderRadius: 999, px: 1.25, py: 0.35, cursor: 'pointer', '&:hover': { bgcolor: `${c.text.primary}1a`, color: c.text.primary } }} > Exit full screen @@ -874,7 +875,7 @@ const DashboardViewCard: React.FC = ({ size="small" onClick={(e) => { e.stopPropagation(); openCardContextMenu(e, { items: headerKebabRows() }); }} onPointerDown={(e) => e.stopPropagation()} - sx={{ color: isFullscreen ? 'rgba(232,226,216,0.6)' : c.text.ghost, p: 0.5, '&:hover': { color: isFullscreen ? '#fff' : c.text.primary } }} + sx={{ color: c.text.ghost, p: 0.5, '&:hover': { color: c.text.primary } }} > diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx index 84412c1d..0363c700 100644 --- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx +++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx @@ -71,7 +71,7 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader; tileZone: string | und onPointerUp={header.onPointerUp} onPointerCancel={header.onPointerCancel} onLostPointerCapture={header.onLostPointerCapture} - style={{ height: 42, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 16px', borderBottom: `1px solid ${WC.line}`, background: WC.panel, gap: 14, cursor: header.dragging ? 'grabbing' : 'grab', touchAction: 'none', userSelect: 'none' }} + style={{ height: 38, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 14px', background: WC.page, gap: 14, cursor: header.dragging ? 'grabbing' : 'grab', touchAction: 'none', userSelect: 'none' }} > {/* macOS traffic lights: the whole window gets close / minimize / full size view like every card. */}