diff --git a/opencode.md b/opencode.md index f054eb6..853a05f 100644 --- a/opencode.md +++ b/opencode.md @@ -228,9 +228,10 @@ list reordering, not free placement. Don't confuse the two. the panel), a `resize` effect re-clamps on browser resize, and `.win-window.centered` carries `max-width`/`max-height`. Keep these in sync if you add a new window path, or windows will escape the viewport. The bottom - limit is `TASKBAR_HEIGHT = 54` in `WindowsDesktop.tsx` (panel `bottom:10px` + - `height:44px`), so a window lands flush with the panel's top edge; note - `useDesktopIcons.ts` has its **own** `TASKBAR_HEIGHT = 48` for the icon grid. + limit is `TASKBAR_HEIGHT = 44` in `WindowsDesktop.tsx` (panel `bottom:10px` + + `height:44px`; 44 lets a window tuck 10px behind the panel's top edge, which + looked better than stopping dead flush); note `useDesktopIcons.ts` has its + **own** `TASKBAR_HEIGHT = 48` for the icon grid. - Exposing the **dev** server over a tunnel needs the tunnel host in `allowedDevOrigins` (`next.config.ts`). Without it Next dev rejects the cross-origin HMR WebSocket, so the client never hydrates — the page is SSR diff --git a/src/app/components/WindowsDesktop.tsx b/src/app/components/WindowsDesktop.tsx index 7aea1bc..4223a9d 100644 --- a/src/app/components/WindowsDesktop.tsx +++ b/src/app/components/WindowsDesktop.tsx @@ -9,11 +9,11 @@ import { useTheme } from "./useTheme"; import { useDesktopIcons } from "./useDesktopIcons"; import { WALLPAPER, friends } from "../data"; -// The panel is anchored at `bottom: 10px` and is 44px tall, so the usable -// desktop area ends 54px above the viewport bottom. Windows are clamped to that -// line, so a window dragged down lands flush with the top of the taskbar with -// nothing hidden behind it. -const TASKBAR_HEIGHT = 54; +// The panel is anchored at `bottom: 10px` and is 44px tall, so its top edge is +// 54px above the viewport bottom. Windows clamp at 44px from the bottom, i.e. +// they tuck 10px behind the panel's top edge - a slight overlap that reads +// better than stopping dead flush. +const TASKBAR_HEIGHT = 44; const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends");