dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

windows tuck 10px behind the taskbar top instead of stopping dead flush

Browse source
This commit is contained in:
Martin Dvořák 2026-09-24 14:43:02 +00:00
commit 626a657a67
2 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
opencode.md
View file

@ -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 the panel), a `resize` effect re-clamps on browser resize, and
`.win-window.centered` carries `max-width`/`max-height`. Keep these in sync if `.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 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` + limit is `TASKBAR_HEIGHT = 44` in `WindowsDesktop.tsx` (panel `bottom:10px` +
`height:44px`), so a window lands flush with the panel's top edge; note `height:44px`; 44 lets a window tuck 10px behind the panel's top edge, which
`useDesktopIcons.ts` has its **own** `TASKBAR_HEIGHT = 48` for the icon grid. 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 - Exposing the **dev** server over a tunnel needs the tunnel host in
`allowedDevOrigins` (`next.config.ts`). Without it Next dev rejects the `allowedDevOrigins` (`next.config.ts`). Without it Next dev rejects the
cross-origin HMR WebSocket, so the client never hydrates — the page is SSR cross-origin HMR WebSocket, so the client never hydrates — the page is SSR

10
src/app/components/WindowsDesktop.tsx
View file

@ -9,11 +9,11 @@ import { useTheme } from "./useTheme";
import { useDesktopIcons } from "./useDesktopIcons"; import { useDesktopIcons } from "./useDesktopIcons";
import { WALLPAPER, friends } from "../data"; import { WALLPAPER, friends } from "../data";
// The panel is anchored at `bottom: 10px` and is 44px tall, so the usable // The panel is anchored at `bottom: 10px` and is 44px tall, so its top edge is
// desktop area ends 54px above the viewport bottom. Windows are clamped to that // 54px above the viewport bottom. Windows clamp at 44px from the bottom, i.e.
// line, so a window dragged down lands flush with the top of the taskbar with // they tuck 10px behind the panel's top edge - a slight overlap that reads
// nothing hidden behind it. // better than stopping dead flush.
const TASKBAR_HEIGHT = 54; const TASKBAR_HEIGHT = 44;
const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends"); const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends");