It should be made clearer what the 'link' buttons do

[jelleroorda]

Bug Description

I am not sure what the ‘link’ icons do in section -> design -> layout -> the margin/padding box. Maybe we can add a title with more explanation? It probably doesn’t do anything yet, but from a UX point of view I’m not sure what it’s supposed to do.

Maybe we can add a title so it displays more information on hover?

How to Reproduce

Open the settings for a section for example.

Extra Detail

Environment

Statamic 3.2.2 Pro
Laravel 8.58.0
PHP 8.0.6
edalzell/blade-directives 3.5
handmadeweb/buildamic dev-main

[sliver37]

The vertical ones link the top/bottom options, the horizontal ones for the left/right. So if you want to quickly change top/bottom padding, you click the vertical padding one and it links them together. Or if you click both horizontal and vertical it links them all together.

@michaelr0 had a good idea on how I can update the UI to make that more clear, by adding the link icons next to each option , rather than in the top corner. So left and right both have a horizontal link icon, and clicking either one will make them both highlight. And same with the top.

Happy for any other ideas though :)