feat : added zoom controls to the editor

[hazikchaudhry]

Issue

There were no zoom controls before

Solution

Added zoom controls

Risk

might mess with layout perhaps maybe

Checklist

• Acceptance criteria met
• Wiki documentation is written and up to date
• Unit tests written and passing
• Integration tests written and passing
• Continuous integration build passing

[linear]

VPS-71

[coderabbitai]

Warning

Review limit reached

@hazikchaudhry, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 12 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0d2e66e3-6984-4a46-9f77-2df453e44008

📥 Commits

Reviewing files that changed from the base of the PR and between d6d24ac and a7ff717.

📒 Files selected for processing (4)

• frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
• frontend/src/features/authoring/canvas/Canvas.tsx
• frontend/src/features/authoring/canvas/ZoomControls.tsx
• frontend/src/features/authoring/stores/editor.ts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[K1mmyn]

too much claude code hazik.

there is a bug when you zoom in, you can't scroll left only right. this is because the scrollbar can only generate positive scroll values so when youre doing justify center and align items center and overflow hidden, when canvas becomes too big and you want to scroll side to side it can't because you aren't able to scoll to negative values (scroll left)

Simple fix is do justify item: safe center and align item safe center. this will prevent this scroll loss effect.

you also might want to change how much zoom is for one click. google slides does every click it double and also allows any value you want ie 69 or 420. You're basically 90% of the way there so might aswell