Close button overlays toast text

[cduff]

For example:

Since v11 the close button is absolutely positioned. However, with its default position and with the default toast padding, it's possible for the close button to overlay toast text. This didn't happen <v11.

Should the default styling avoid this?

[fkhadra]

Hey @cduff, I couldn't reproduce it, normally the content has a padding to avoid that. Could it be that you have some custom css rules applied? May I ask you to reproduce the issue on stackblitz? Thank you

[cduff]

Hey @cduff, I couldn't reproduce it, normally the content has a padding to avoid that. Could it be that you have some custom css rules applied? May I ask you to reproduce the issue on stackblitz? Thank you

Hi @fkhadra, thanks for your response on this.

Try this StackBlitz:

https://stackblitz.com/edit/vitejs-vite-rhrg1ybn?file=src%2FApp.tsx

[Link2Twenty]

Looks like the padding is 14px https://github.com/fkhadra/react-toastify/blob/a6250d5b918b89eb84a9f1151fda8f9f426a47e7/src/style.css#L130

But the button is 20px wide and 25px tall (3px come from the line-height) https://github.com/fkhadra/react-toastify/blob/a6250d5b918b89eb84a9f1151fda8f9f426a47e7/src/style.css#L298-L299 https://github.com/fkhadra/react-toastify/blob/a6250d5b918b89eb84a9f1151fda8f9f426a47e7/src/style.css#L322-L323

I would probably update the SVG so it's square

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="m9.48 8 3.75 3.75-1.48 1.48L8 9.48l-3.75 3.75-1.48-1.48L6.52 8 2.77 4.25l1.48-1.48L8 6.52l3.75-3.75 1.48 1.48L9.48 8z"/>
</svg>

Set the height and width of the SVG to 14px. Update the button's line-height to 0; and update the --toastify-toast-padding to 16px.

Then the toast will look like this

The extra s' were added to get as close to the close button as I could.