search

onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.28k stars 205 forks source link

[FEAT] Maintain the size of the top information bar on the window at various zooms #272

Open drfarrell opened 2 months ago

drfarrell commented 2 months ago

Figma and Framer both maintain the same typography size and button size for the top navigation over windows. It would be nice if we could also do the same for Onlook.

So rather than scaling up the buttons and text on zoom, they remain consistent:

Screenshot 2024-08-31 at 5 06 47 PM Screenshot 2024-08-31 at 5 07 02 PM

Also align the buttons to go all the way to the left and right edge of the window – they seem to have a little bit of padding

Technical recommendation: We're applying transform and scale on these. Perhaps they can be ignored.

drfarrell commented 2 months ago

It would be nice to also do this for the dimension labels #259

Figma does this well when zooming in and out on the canvas.

kartik-raj7 commented 2 months ago

Hey @Kitenite Can I take this issue up!

Kitenite commented 2 months ago

@kartik-raj7 go for it!