Skip to content

Fix active window offscreen overflow and reflow at high zoom - #766

Open
Pranjal1423 wants to merge 1 commit into
WordPress:trunkfrom
Pranjal1423:fix/zoom-viewport-active-window
Open

Fix active window offscreen overflow and reflow at high zoom #766
Pranjal1423 wants to merge 1 commit into
WordPress:trunkfrom
Pranjal1423:fix/zoom-viewport-active-window

Conversation

@Pranjal1423

Copy link
Copy Markdown
Contributor

Closes #556

This PR resolves the issue where zooming the browser to 400% on compact/mobile viewports left the active window almost entirely offscreen with title bars, action buttons, and content out of reach while the dock obscured the visible area.

Root Cause

  1. clampGeometryToViewport in src/boot/geometry.ts enforced an artificial 200px minimum floor on maxW and maxH, preventing windows from shrinking down to constrained work areas (such as ~97px at 400% zoom).
  2. WindowManager did not subscribe to work-area changes to reflow floating windows when zoom level or viewport dimensions changed.
  3. Fixed grab margins in clampWindowPosition and rigid dock sizing on compact screens pushed windows and occupied excessive vertical height.

Changes

  • src/boot/geometry.ts: Removed the rigid 200px floor in clampGeometryToViewport to dynamically bound dimensions within available work-area insets.
  • src/window-manager/index.ts: Subscribed WindowManager to subscribeWorkArea() to dynamically re-clamp floating windows on zoom/resize, and adapt default/unpinned dimensions on small viewports.
  • src/window/pointer.ts: Dynamically scaled grab margins in clampWindowPosition() so narrow screens do not push windows offscreen.
  • assets/css/dock.css: Added @media (max-width: 480px), (max-height: 400px) rules to scale dock tile icons and padding compactly at high zoom.
  • src/release-card.ts: Constrained .dm-release-card max-dimensions with scrollable overflow so action buttons stay reachable at high zoom.
  • tests/vitest/high-zoom-window-clamp.test.ts: Added automated unit tests verifying high zoom clamping, position boundaries, and work area shrink reflow.

Automated Test Results (Before vs After Fix)

Before the Fix (Failures due to rigid 200px floor & missing reflow)

$ npx vitest run tests/vitest/high-zoom-window-clamp.test.ts

 FAIL  tests/vitest/high-zoom-window-clamp.test.ts > clampGeometryToViewport at high zoom / compact viewports (#556) > clamps large saved window to fit inside a 97x211 work area at 400% zoom
AssertionError: expected 212 to be less than or equal to 211
 ❯ tests/vitest/high-zoom-window-clamp.test.ts:39:40
     37|   expect( clamped.y ).toBeGreaterThanOrEqual( 0 );
     38|   expect( clamped.x + clamped.width ).toBeLessThanOrEqual( rect.width );
     39|   expect( clamped.y + clamped.height ).toBeLessThanOrEqual( rect.height );
       |                                        ^

Test Files  1 failed (1)
     Tests  2 failed | 2 passed (4)

After the Fix (All tests passing)

$ npx vitest run tests/vitest/high-zoom-window-clamp.test.ts

 RUN  v4.1.5 /Users/pranjalwadhwani/Desktop/desktop-mode

 ✓ tests/vitest/high-zoom-window-clamp.test.ts (5 tests) 33ms
   ✓ clampGeometryToViewport at high zoom / compact viewports (#556)
     ✓ clamps large saved window to fit inside a 97x211 work area at 400% zoom
     ✓ clamps position and size when rect has non-zero origin and small dimensions
   ✓ clampWindowPosition on constrained work areas (#556)
     ✓ does not push window offscreen when bounds.width is smaller than default grab margin
   ✓ WindowManager high-zoom reflow (#556)
     ✓ opening a window in a 100x200 viewport clamps dimensions within desktop bounds
     ✓ shrinking work area reflows open normal windows to fit within new boundaries

 Test Files  1 passed (1)
      Tests  5 passed (5)
   Duration  804ms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

At 400% zoom, the active window is almost completely offscreen

1 participant