WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-28 20:44:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] canvas: the pill hover chip reveals fully above the capsule instead of peeking out as a crescent, and stops wearing card chrome

Browse Source
This commit is contained in:
ciregenz
2026-08-14 12:07:52 -07:00
parent 353b662226
commit e5f3005a9b
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+4 -3
View File
@@ -1042,14 +1042,15 @@ const AgentCard: React.FC<Props> = ({
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. */}
<Box
className="osw-pill-lights osw-card"
className="osw-pill-lights"
onPointerDown={(e: React.PointerEvent) => 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',
}}
frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ const dotSx = (color: string): Record<string, unknown> => ({
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')}