[eric] ui: tile menu gets a hover runway + longer grace (vanished mid-approach); text size range widened to 0.8-1.35 (Tiny to Largest)

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',

frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx

@@ -61,10 +61,12 @@ const GeneralInterface: React.FC<{
           size="small"
           sx={toggleGroupSx}
         >
+          <ToggleButton value={0.8}>Tiny</ToggleButton>
           <ToggleButton value={0.9}>Small</ToggleButton>
           <ToggleButton value={1}>Default</ToggleButton>
           <ToggleButton value={1.1}>Large</ToggleButton>
-          <ToggleButton value={1.2}>Largest</ToggleButton>
+          <ToggleButton value={1.2}>Larger</ToggleButton>
+          <ToggleButton value={1.35}>Largest</ToggleButton>
         </ToggleButtonGroup>
       </Box>