As a user, I want to be able to see the entire CSS property value while editing long values (like nested calculations) in the Advanced panel.

Background:
Currently, the editing area for property values in the Advanced panel is restricted to the relatively small panel width. For longer properties (especially nested calculations), you can't see much of the property at once, so it can get awkward trying to troubleshoot. You either need to scroll horizontally through the entry there (see video) or copy/paste from a text editor.

It would be great to have more room to edit those properties.

Solution suggestion:
Maybe a dialog similar to Webstudio's "Edit Variables" dialog could allow more space to make editing easier. If there were fields for the CSS property and its value, with an expandable area for value, that could provide a lot of flexibility.

Problem

When building layouts on the canvas, I often want to zoom in to see the area I'm working on better. This is especially relevant when I'm designing on the canvas.

Why it's a "problem"

• Currently in Webstudio, the scale of the canvas is set by the breakpoint you're viewing. The page width is sandwiched between the Navigator on the left and the style panel on the right. With smaller design details viewed on a larger-width breakpoint, it can be difficult to see what you're doing in that relatively small space.
• This feels like a problem because when designing in Figma and the Divhunt website builder (https://www.divhunt.com/feature/canvas) you can zoom and pan on the canvas.

Current options to deal with this

1. To scale up the canvas, you can currently undock the Navigator panel on the left to see a bit more screen real estate (higher scale). This does help a bit. But then you need to open and close the Layers panel to see the page structure. Also, I'd like more control over the scale.
2. You could choose a smaller breakpoint to see better, but that affects the layout you're designing.

Suggestion

Maybe the canvas scale could be optionally unlinked from the breakpoint you're viewing.

• Then you could set the scale/zoom independently.
• An independent scale/zoom would mean that possibly not all of the page width would be shown on the canvas. So the ability to pan around the canvas would also be needed.
• I realize that these features would mean making Webstudio more of a design tool like Figma.

Rapid progress you can follow here: https://github.com/webstudio-is/webstudio/issues/3399

Are there recordings of the meetups?

Is Webstudio experiencing issues right now? I've been working in the builder for a bit (without issue). Then this error message suddenly popped up about 5 minutes ago: "Fatal error. You don't have edit access to this project Synchronization has been paused."

The Navigator panel shows vertical lines indicating the "scope" of each component (i.e., what's nested inside). These guides are great because they help identify component nesting at a glance.

However, the relatively dark color of these lines makes them seem more visually important than needed. This distracts from the components themselves and makes the structure tree look "busy."

Suggestion: Lightening the color (or decreasing the opacity) of those vertical lines would shift the visual focus in the panel to the components. As a result, the Navigator would appear less "busy."

This approach is similar to designing tables to focus on the data by lightening the cell borders.