Try moving the Modal close button over to the right

[kjellr]

Currently, the modal close button is in right-aligned to the modal content. But because the button has no border by default, the x icon button appears misaligned:

When hovering over the button, the borders make the intended alignment more clear:

---

This PR tries shifting the button over to the right by 8px to offset the button padding. This properly aligns the x icon with the right side of the content below it:

On hover, the borders appear, and the intentional misalignment becomes clear, but I don't think this is much of an issue. I'd rather that this appeared misaligned in the hover state than in its default state.

[davewhitley]

It would help if the X icon was bigger inside of its 20px container, but this looks like a good quick fix.

[kjellr]

It would help if the X icon was bigger inside of its 20px container, but this looks like a good quick fix.

Something like this?

That's a 24px icon inside of the same size container, with the position shifted just 4px to the right so things line up.

[karmatosed]

I think if we do increase we need to also increase other icons, which is something to do but feels outside the small fix of this issue. Beyond that, works well for me.

[karmatosed]

The hover state feels a little unusual with border now but I think that's something to explore in another issue maybe. It certainly is better aligned with this PR on non-hover.