responsive desktop: shrink icons on cramped viewports so they never collide; clamp windows to the viewport

opencode.md

@@ -138,6 +138,11 @@ with icons, it's almost certainly here.
   computes `cols` / `rows` for the whole desktop.
 - `defaultCells()` assigns each icon the cell its stack already occupies. So
   **the grid you see on load is the grid dragging uses** — no re-layout jump.
+- On cramped viewports, CSS media queries shrink `.win-icon` (glyph, label and
+  all). Because the grid is measured from the rendered icons, it adapts
+  automatically and there is always a cell per icon — that is what keeps icons
+  from colliding on small/narrow screens. Don't hardcode icon sizes in the grid
+  maths; shrink them in CSS instead.
 - Icons are then rendered absolutely positioned in `.win-icon-layer`, driven by
   the `positions` map (`{ [iconId]: {x, y} }`).
 - Dragging: `onPointerDown` builds a **ghost** (a clone of the button appended
@@ -218,6 +223,11 @@ list reordering, not free placement. Don't confuse the two.
   `eslint-disable-next-line` with a comment. Don't add more without a reason.
 - Watch for `pointercancel`: any custom pointer gesture over an `<img>`, link,
   or text selection needs `draggable=false` / `user-select: none`.
+- Windows must fit the viewport: `openAppDef` / `resizeWin` clamp `w`/`h` in
+  `WindowsDesktop.tsx`, 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-open path, or windows will open off-screen on a small
+  monitor.
 - 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