diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx index 943d9ee3..9b3d556d 100644 --- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx +++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx @@ -68,7 +68,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind if (!menuHot) { setMenuHot(true); requestAnimationFrame(() => setMenuOpen(true)); return; } setMenuOpen(true); }; - const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 320); }; + const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 550); }; const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); }; const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => ( @@ -99,6 +99,9 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind onMouseEnter={openMenu} onMouseLeave={scheduleClose} sx={{ position: 'absolute', top: 19, width: 216, background: '#FFFFFF', + // Invisible runway over the button-to-menu gap: without it the pointer crosses dead + // space, mouseleave fires, and the menu vanishes mid-approach ("baited"). + '&::before': { content: '""', position: 'absolute', top: -20, left: 0, right: 0, height: 20 }, ...(alignRight ? { right: -8 } : { left: -8 }), border: '1px solid rgba(0,0,0,0.06)', borderRadius: '12px', boxShadow: '0 .5rem 2rem rgba(0,0,0,.14)', p: 1.25, zIndex: 1200, transformOrigin: alignRight ? 'top right' : 'top left', diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx index 81ea84eb..c66ea94e 100644 --- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx +++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx @@ -61,10 +61,12 @@ const GeneralInterface: React.FC<{ size="small" sx={toggleGroupSx} > + Tiny Small Default Large - Largest + Larger + Largest