Update viewport adjustments to account for zoom level

[malore350]

Pull Request

This PR corrects viewport dimensions and element positioning logic to properly account for the application's zoom level, ensuring the UI remains responsive and correctly bounded when zoomed in or out.

Description

• Updated the main application container in App.tsx to set width and height dynamically (e.g., 100 / zoomLevel) to prevent layout overflow or under-fill when CSS zoom is applied.

• Modified fit-viewport.ts to incorporate the current zoom level from zoom-store when calculating viewport boundaries.

• Fixed positioning logic for UI elements to ensure they fit within the visible area regardless of the current scaling factor.

Related Issues

Fixes #516

[Copilot]

Pull request overview

This PR modifies viewport handling to account for the application's zoom level. When CSS zoom is applied to the main container, UI elements need adjusted boundary calculations to ensure they remain properly positioned and don't overflow the visible area.

Changes:

• Modified the main application container to dynamically adjust dimensions inversely to zoom level, maintaining visual fill
• Updated viewport boundary calculations to account for zoom when positioning UI elements

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/App.tsx	Removed static h-screen/w-screen classes and added dynamic width/height styles that scale inversely with zoom level to maintain consistent visual rendering
src/utils/fit-viewport.ts	Added zoom-aware viewport calculation by retrieving current zoom level and dividing viewport dimensions accordingly

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Division by zero risk: If zoomLevel is 0 (or very close to 0), this will cause division by zero or result in extremely large values. While the zoom store defines a minimum zoom level of 0.5, there's no runtime protection here. Consider adding a guard to ensure zoomLevel is a valid non-zero value before performing this calculation.

[Copilot]

Division by zero risk: If windowZoomLevel is 0, this will cause division by zero. While the zoom store defines a minimum zoom level of 0.5, there's no runtime protection here. Consider adding a guard to ensure zoomLevel is a valid non-zero value, or using Math.max(zoomLevel, 0.1) to provide a safe minimum.

Suggested change

	const zoomLevel = useZoomStore.getState().windowZoomLevel;
	const rawZoomLevel = useZoomStore.getState().windowZoomLevel;
	const zoomLevel = Math.max(rawZoomLevel || 0, 0.1);

[Copilot]

Potential coordinate system issue with portaled elements: This function is used by components like dropdown.tsx and tooltip.tsx which portal their content to document.body (outside the zoomed container). When elements are portaled outside the zoom container, they should be positioned using normal viewport coordinates, not zoom-adjusted ones. Verify that dividing viewport dimensions by zoomLevel produces correct positioning for portaled elements, as getBoundingClientRect() returns coordinates that already account for CSS zoom transformations.