From e5f3005a9b72d382566b5fe14fbc9c18dbb8e386 Mon Sep 17 00:00:00 2001 From: ciregenz Date: Fri, 14 Aug 2026 12:07:52 -0700 Subject: [PATCH] [eric] canvas: the pill hover chip reveals fully above the capsule instead of peeking out as a crescent, and stops wearing card chrome --- frontend/src/app/pages/Dashboard/cards/AgentCard.tsx | 7 ++++--- frontend/src/app/pages/Dashboard/cards/WindowControls.tsx | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx index b3fd7010..ac2cbd9c 100644 --- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx +++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx @@ -1042,14 +1042,15 @@ const AgentCard: React.FC = ({ onPointerMove={handleDragPointerMove} onPointerUp={handleDragPointerUp} className="osw-pill-host" - sx={{ position: 'relative', touchAction: 'none', userSelect: 'none', pt: '26px', mt: '-26px', '&:hover .osw-pill-lights': { opacity: 1, pointerEvents: 'auto' } }} + sx={{ position: 'relative', touchAction: 'none', userSelect: 'none', pt: '50px', mt: '-50px', '&:hover .osw-pill-lights': { opacity: 1, pointerEvents: 'auto' } }} > + {/* Fully above the capsule: at top -8 the 40px round chip hid behind the ~34px pill and hover revealed only its crown, which read as a deformed corner plus a stray shadow (Eric, 2026-08-14). No osw-card class: wearing it dressed this chip in card selection/shadow chrome. */} e.stopPropagation()} sx={{ ...ARC_CHIP_SX, - position: 'absolute', top: -8, left: 4, zIndex: 2, background: 'rgba(24,14,32,0.85)', + position: 'absolute', top: -44, left: 4, zIndex: 2, background: 'rgba(24,14,32,0.85)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', opacity: 0, pointerEvents: 'none', transition: 'opacity 140ms ease', }} diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx index 56dc988a..8029297e 100644 --- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx +++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx @@ -24,7 +24,7 @@ const dotSx = (color: string): Record => ({ width: 12, height: 12, p: 0, m: 0, borderRadius: '50%', border: '0.5px solid rgba(0,0,0,0.06)', background: '#cccac4', cursor: 'pointer', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1, transition: 'background 150ms', - '.osw-card:hover &': { background: color }, + '.osw-card:hover &, .osw-pill-lights:hover &': { background: color }, '& > span': { fontSize: 9, fontWeight: 800, lineHeight: 1, color: 'rgba(0,0,0,0.5)', opacity: 0, transition: 'opacity 120ms', pointerEvents: 'none' }, }); @@ -81,7 +81,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, closeDataOnboardin display: 'flex', gap: '8px', alignItems: 'center', flex: 'none', '&:hover span': { opacity: 1 }, // Inert until the card is hovered: crossing a card can't hit-test or fire React enter/leave // through the dots, and you can't aim at a dot without hovering its card first anyway. - pointerEvents: 'none', '.osw-card:hover &': { pointerEvents: 'auto' }, + pointerEvents: 'none', '.osw-card:hover &, .osw-pill-lights:hover &': { pointerEvents: 'auto' }, }}> {btn(RED, '×', onClose, 'Close', 'close')} {btn(YELLOW, '−', onMinimize, 'Minimize', 'minimize')}