Make tool windows resizable by dragging edges or corners

Library, Notes, and the other floating tool windows (Tasks, Calendar,
Gallery, Email, Cookbook, Brain, Settings, Theme, Compare, Research,
Sessions) could be moved and snapped but never resized — there were no
resize handles and dragging the edges did nothing.

Add a shared makeWindowResizable() helper and wire it into the existing
makeWindowDraggable() so every draggable window gains native-style
edge/corner resizing from one place:

- Grab any of the four edges or four corners to resize; the cursor
  reflects the active handle (ew/ns/nwse/nesw-resize).
- Detects pointer proximity to the border instead of injecting handle
  elements, so it works regardless of each window's overflow model
  (.modal-content scrolls its body; .notes-pane scrolls an inner el).
- Min-size clamp (320x200) and viewport clamping so a window can't be
  collapsed to nothing or dragged off-screen.
- Per-window size is remembered and restored on reopen.
- Disabled on mobile (windows are full-screen sheets there) and while a
  window is docked or fullscreen-snapped.
- Touch supported at tablet width and up; self-heals a missed pointer-up
  so a lost mouseup can't leave a window stuck in resize mode.
This commit is contained in:
Zeus-Deus
2026-06-01 19:49:23 +02:00
parent 70a71f603c
commit b4b1d00cc5
3 changed files with 269 additions and 0 deletions
+15
View File
@@ -4596,6 +4596,21 @@ body.bg-pattern-sparkles {
background-color: inherit;
}
.modal-header:active { cursor:grabbing; }
/* Edge/corner window resize (windowResize.js). While a resize is in
progress, suppress text selection and force the active resize cursor
across the whole document so it does not flicker as the pointer passes
over child elements mid-drag. */
body.window-resizing-active { user-select:none !important; }
body.window-resizing-active * { cursor:inherit !important; }
/* Suppress only TRANSITIONS while resizing so the edge tracks the cursor
crisply. We deliberately do NOT toggle `animation` here: toggling
animation offon re-triggers the modal open-animation (a scale-in) on
mouseup, which both mis-measures the final size and visibly "pops" the
window. windowResize.js instead kills the one-shot open animation inline
once, in begin(). */
.window-resizing {
transition:none !important;
}
/* Cookbook's modal-content is var(--bg) (inline) instead of the default
var(--panel), so its sticky header which defaults to var(--panel)
read as a different-coloured band. Match the header to the cookbook