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

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

View file

@ -10,10 +10,9 @@ import { useDesktopIcons } from "./useDesktopIcons";
import { WALLPAPER, friends } from "../data";
// 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
// window stops just above the taskbar with a small gap instead of touching or
// overlapping it.
const TASKBAR_HEIGHT = 64;
// 54px above the viewport bottom. Windows clamp 5px above that (59), so a
// dragged or maximized window stops just above the taskbar.
const TASKBAR_HEIGHT = 59;
const LEFT_APPS = APPS.filter((a) => a.id !== "services" && a.id !== "friends");

View file

@ -307,17 +307,18 @@ a.win-icon {
}
.win-window.maximized {
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 {
left: 0;
right: 0;
top: 0;
bottom: 54px;
bottom: 59px;
margin: auto;
/* Never let a centred window (e.g. Welcome) overflow a small viewport. */
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
push the window off-screen; let it shrink further so it still fits. */