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

react-toastify/src/style.css

Line 130 in a6250d5

padding: var(--toastify-toast-padding);

But the button is 20px wide and 25px tall (3px come from the line-height)

react-toastify/src/style.css

Lines 298 to 299 in a6250d5

	top: 6px;
	right: 6px;

react-toastify/src/style.css

Lines 322 to 323 in a6250d5

	height: 16px;
	width: 14px;

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.