Fix/zoom to fit nan issue 2069

[Rish-it]

Fix: Resolve NaN% zoom issue after 'Zoom to Fit' selection

Description

This PR fixes the NaN% zoom issue that occurs after selecting "Zoom to Fit" in the editor. The problem was caused by insufficient validation of dimensions and scale calculations, leading to invalid zoom values that broke subsequent zoom in/out functionality.

Key improvements:

• Added comprehensive dimension validation for container, viewport, and iframe elements
• Implemented proper error handling with detailed console logging for debugging
• Added finite number checks for calculated scale values
• Improved code structure with clear comments and better readability
• Enhanced the handleZoomToFit function with robust error handling

The fix ensures that:

• Zoom displays a valid percentage after selecting "Zoom to Fit"
• Zoom in and zoom out functions work correctly afterward
• Invalid dimensions are properly detected and handled gracefully

Related Issues

Fixes #2069

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

Steps to verify the fix:

1. Open the editor with any project
2. Click on the "Zoom to Fit" option from the zoom controls
3. Verify that the zoom level displays a valid percentage (not NaN%)
4. Test zoom in functionality by clicking the zoom in button or using keyboard shortcuts
5. Test zoom out functionality by clicking the zoom out button or using keyboard shortcuts
6. Repeat the process multiple times to ensure consistent behavior

Expected behavior:

• Zoom level should show a valid percentage after "Zoom to Fit"
• All zoom controls should remain functional
• Content should be properly centered and scaled to fit the viewport
• No console errors related to invalid dimensions or calculations

Screenshots (if applicable)

Before fix: Zoom shows "NaN%" after selecting "Zoom to Fit" After fix: Zoom shows valid percentage and all zoom functions work properly https://github.com/user-attachments/assets/8791250f-30ed-4833-ac01-1aedb67ef957

---

[!IMPORTANT] Fix NaN% zoom issue in zoom-controls/index.tsx and add project code download feature in sandbox/index.ts and project-breadcrumb.tsx.

• Behavior:
  • Fix NaN% zoom issue in handleZoomToFit in zoom-controls/index.tsx by adding dimension validation and finite number checks.
  • Ensure zoom displays valid percentage and zoom functions work post 'Zoom to Fit'.
• Error Handling:
  • Add error handling and console logging in handleZoomToFit.
• Features:
  • Add downloadFiles() in sandbox/index.ts to download project code as a zip.
  • Implement handleDownloadCode() in project-breadcrumb.tsx to trigger code download and log analytics.
• UI:
  • Update en.json with new strings for download actions.

^{This description was created by for de76e9d4d826bc484dcba58d88ac30ffc366092f. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.