Description: Currently, the workflow for editing Border and Box Shadow settings feels inefficient due to unnecessary nesting.
The Issue: When a user opens the “Border / Box Shadow” accordion in the Style tab, they are met with another set of “pencil” icons for both Border and Box Shadow. To actually change a value (like border-width or shadow color), the user must click a second time to open a separate popover/panel.
Proposed Improvement: Instead of using popovers triggered by pencil icons, the controls (Width, Style, Color, Radius, etc.) should be expanded by default inside the main accordion.
Currently, when the “Border / Box Shadow” tab is toggled, it leaves a lot of unused empty space under the labels. It would be much more efficient to display the core settings directly in that space once the section is opened. This would eliminate the need for secondary panels and allow for immediate editing of the most common properties.
Why this matters:
-
Reduces click fatigue: It removes 1-2 unnecessary clicks every time a user wants to style an element.
-
Better Visibility: Users can see their border and shadow settings at a glance without hunting through sub-menus.
-
Consistency: Many other design tools display these core properties immediately upon opening the relevant section.
Please see the attached screenshots showing the current “double-step” process that could be simplified for a faster workflow.
Additional Observations: This “redundant click” pattern is also present in other areas, such as Text Shadow and Transform settings. While these features might be used less frequently than Borders, the same logic applies: since the sidebar already has the space available once the category is expanded, the core controls should be immediately accessible instead of being hidden behind an extra click.