Try adding some additional padding to the modal component.

[kjellr]

The modal component currently has 16px of padding all the way around it. This is fine, but it does leave things feeling a little closed in. This PR updates that from 16px to 24px instead. This is more padding than we typically use around these sorts of containers, but I think the extra breathing room makes the modals feel a lot more comfortable.

Before:

After

[kjellr]

($grid-size * 3) feels a little weird to repeat so many times here. I'm wondering if this should be an additional variable: $grid-size-extra-large or something.

[mapk]

Yep! Just tested and confirmed a better feeling of comfort provided by the extra padding. Thanks for improving the small details, Kjell. It doesn't look like this extra padding interferes with the content at all either.

[kjellr]

@mapk Would you mind giving this one more spin? I've taken my own advice from up here and made 24px into a reusable variable for better readability. Should look exactly the same.

[mapk]

The padding is working well. I did notice one little thing bothering me... the close icon or X in the upper right corner looks a bit far away from the edge. I realize that's because it has its own padding. On hover, when I see the button's outline, it looks good. But when it's by itself, it feels far from the edge. I'm not sure of a better solution here, so don't let that hold up the PR.

Unfocused and unhovered

Hovered

[kjellr]

the close icon or X in the upper right corner looks a bit far away from the edge.

Yeah, I agree, it looks weird. 😕 I'll try working on that in a followup PR. (Edit: I opened #16883 to try this out.)

Thanks!