Fix issue #12652 - Sidebar spacing#13106
Fix issue #12652 - Sidebar spacing#13106geekpulp wants to merge 7 commits intoWordPress:masterfrom geekpulp:master
Conversation
Fix spacing on sidebar Adding some spacing on the sidebar below each of the descriptions. This corrects issue #12652
| margin-top: -$grid-size; | ||
| font-style: italic; | ||
| margin-bottom: 0; | ||
| margin-bottom: 20px; |
There was a problem hiding this comment.
Thanks for the PR @geekpulp
I'm wondering if the best way to fix is to add a margin bottom to the help component (which may or may not be present depending on what component is used). It feels like the root issue is that there's no space between controls. So maybe the fix is more to target something like .components-base-control + .components-base-control
What do you think?
There was a problem hiding this comment.
Another thing is I think we're trying to make sure we use the $grid-size as a basis for all these spaces in the UI. So maybe $grid-size*2 or something?
cc @jasmussen
There was a problem hiding this comment.
Thanks for the feedback. You’re right. I’ll change my approach and update.
There was a problem hiding this comment.
@youknowriad Ok, I've had another crack at it. Seems to have done the trick. Also updated a related stylesheet to use $grid-size.
It's quite a learning curve but this is strangely fun.
There was a problem hiding this comment.
Thank you for using $grid-size! If you need to, there's also $grid-size-large, which is the same as $grid-size * 2.
There was a problem hiding this comment.
@jasmussen Cool, I'll change that then. Is there somewhere I can go to see standards like grid-size so I can proactively make changes like that? Is it something documented somewhere?
There was a problem hiding this comment.
Hmm showing my newbie skills here with Git. Sorting it.
remove margin from .components-base-control__help and created margin in .components-base-control + .components-base-control. This should make the spacing between components in the sidebar more appealing.
Changing to $gridsize from px
Change from grid-size * 2 to grid-size-large
3 participants
Fix spacing on sidebar
Adding some spacing on the sidebar below each of the descriptions. This
corrects issue #12652
Description
How has this been tested?
Minimal testing, made the change, tried it in safari, Chrome, Firefox on MacOS
Screenshots
Types of changes
small css change that increase spacing on sidebar below descriptionChecklist: