Skip to content

Widgets: reflow floating cards when the desktop resizes - #914

Open
juanlentino wants to merge 1 commit into
WordPress:trunkfrom
juanlentino:widgets-reflow
Open

juanlentino wants to merge 1 commit into
WordPress:trunkfrom
juanlentino:widgets-reflow

Conversation

@juanlentino

@juanlentino juanlentino commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #913

Floating widgets stored a fixed left/top offset, so when the window got wider, the docked column moved right with the edge and the cards lined up next to it stayed behind.

What changed

  • src/widgets/reflow.ts (new, pure): cards within 32 px of each other form one group. Each group keeps its distance to whichever edge it's nearest to, on each axis (a right-leaning group follows the right edge, a left one stays, a centered one stays centered). Cards never move relative to their own group, so a hand-built grid survives any resize.
  • src/widgets/layer.ts: reflows on area resize (the existing ResizeObserver / resize path) and on boot, then runs the existing work-area clamp.
  • src/widgets/state.ts: new openstation-widgets-geometry-frame localStorage key storing the area size the geometry was saved against, so a session opened at another size reflows on load. Existing frozen desktop-mode-* keys are untouched.
  • Docs: docs/javascript-reference.md (widget geometry section) and docs/data-model.md (web-storage row).
  • Tests: tests/vitest/widgets-reflow.test.ts.

Testing

  • npm run build, npm run lint, npm run typecheck, and npm run test:js all pass.
  • Manual: arrange floating widgets next to the column, resize the window, confirm the group follows.

🤖 Generated with Claude Code

Open WordPress Playground Preview
Touching floating cards form one arrangement that keeps its distance to
the nearest edge per axis, so a grid parked beside the docked column
follows it when the window widens. The saved area size is stored so a
session opened at another size reflows on boot too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Po8uLv2drpnsAWMkNmG2Tf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants