Settings Closing "X" active box misalignment

[Leah123-d]

p5.js version

v2.15.9 (editor) v1.11.1 (p5.js file)

What is your operating system?

Mac OS

Web browser and version

133.0.6943.127

Actual Behavior

In Settings, when the closing "X" is clicked, the box that appears around is not centered around the "X".

Expected Behavior

When the closing "X" is clicked, the surrounding box should be center around the closing "X".

Steps to reproduce

Steps:

1. Open the P5 editor at this link
2. Click the gear icon to the top right corner of the editor underneath the sign-up button
3. In Settings, click the closing "X" in the top right corner
4. Click and hold the closing "X" to see the box is not center around the "X"

Bug Preview:

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Leah123-d]

Using Dev Tools I was able to find that the closing "X" has padding on the left and none on the right.

Here is a photo example from Dev Tools:

Here is the file and code line the CSS can be adjusted to remove the padding on the left.

.overlay__close-button {
  @include icon();
  padding: #{math.div(3, $base-font-size)}rem 0 #{math.div(3, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
}

Suggested Fix:

A suggested fix would be removing the padding to the left of the close button.

Below is an example of how the code will be adjusted.

.overlay__close-button {
  @include icon();
  padding: #{math.div(3, $base-font-size)}rem 0 #{math.div(3, $base-font-size)}rem;
}

[raclim]

Thanks so much @Leah123-d for providing a really thorough dive into this issue and a suggested fix for it!