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

windows stop 5px above the taskbar; apply the same gap to maximized windows

Browse source
This commit is contained in:
Martin Dvořák 2026-09-24 15:06:10 +00:00
commit 12ff3e70e9
3 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
opencode.md
View file

@ -228,10 +228,11 @@ 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 = 64` in `WindowsDesktop.tsx` (panel `bottom:10px` + limit is `TASKBAR_HEIGHT = 59` in `WindowsDesktop.tsx` (panel top at 54px + a
`height:44px` = 54, plus a 10px gap), so a dragged window stops just above the 5px gap), so dragged and maximized windows stop 5px above the taskbar. That
taskbar; note `useDesktopIcons.ts` has its **own** `TASKBAR_HEIGHT = 48` for `59` is duplicated in `skeuo.css` (`.win-window.maximized` height,
the icon grid. `.win-window.centered` bottom / max-height) — keep them in sync. 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

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

@ -10,10 +10,9 @@ import { useDesktopIcons } from "./useDesktopIcons";
import { WALLPAPER, friends } from "../data"; import { WALLPAPER, friends } from "../data";
// The panel sits at `bottom: 10px` with a height of 44px, so its top edge is // The panel sits at `bottom: 10px` with a height of 44px, so its top edge is
// 54px above the viewport bottom. Windows clamp 10px above that, so a dragged // 54px above the viewport bottom. Windows clamp 5px above that (59), so a
// window stops just above the taskbar with a small gap instead of touching or // dragged or maximized window stops just above the taskbar.
// overlapping it. const TASKBAR_HEIGHT = 59;
const TASKBAR_HEIGHT = 64;
const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends"); const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends");

7
src/app/skeuo.css
View file

@ -307,17 +307,18 @@ a.win-icon {
} }
.win-window.maximized { .win-window.maximized {
border-radius: 0; border-radius: 0;
height: calc(100% - 54px) !important; /* 54px panel top + 5px gap, so maximized windows also stop above the panel. */
height: calc(100% - 59px) !important;
} }
.win-window.centered { .win-window.centered {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 54px; bottom: 59px;
margin: auto; margin: auto;
/* Never let a centred window (e.g. Welcome) overflow a small viewport. */ /* Never let a centred window (e.g. Welcome) overflow a small viewport. */
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
max-height: calc(100vh - 74px); max-height: calc(100vh - 79px);
} }
/* On very short viewports the default min-height would win over max-height and /* On very short viewports the default min-height would win over max-height and
push the window off-screen; let it shrink further so it still fits. */ push the window off-screen; let it shrink further so it still fits. */