Widgets: Blocks areas need width/padding adjustments

[mapk]

Some width and padding adjustments can help the new widgets screen visually.

The new widgets screen shows blocks areas in a narrow column that's set to max-width:610px and it also includes a large amount of padding on the left/right sides of the blocks.

Solutions

1. Change the max-width of .edit-widgets-widget-area to 700px instead of 610px.
   Proposed:
   .edit-widgets-widget-area { max-width: 700px; }

2. Remove the padding on left/right side of .block-editor-block-list__layout for this screen.
   Proposed:
   .block-editor-block-list__layout { padding-left:46px; padding-right:46px; }

---

Current appearance:

Proposed appearance:

[karmatosed]

Thanks for reporting this. I agree so much it's better with less padding. I do wonder though, could you go a step further? What about aligning the edge to the text and arrow? Would that be too big a block space?

[mapk]

Here's an example of the blocks being wider.

The block UI starts falling outside the Block Area. The additional padding on the left/right sides help keep this UI inside and mimic more of the Editor "feel" here. Let's keep the proposed appearance in the early mockup.

[karmatosed]

The block UI starts falling outside the Block Area.

Ah good catch, in that case 100% agree with more padding.