Wrong position on mobile in `RTL`

[Zakher Masri]

Describe the feature / bug 📝:

Extra space on the left when direction is RTL and screen size is less than 600px

Steps to reproduce the bug 🔁:

1. Make the sonner RTL by setting dir="rtl" in the Toaster component

<Toaster dir="rtl" />

2. View the site on mobile
3. You'll see the extra space like the screenshot below:

I temporarily fixed it by setting the following tailwind classname start-[32px]

And that 32 pixel is basically equivalnt to

calc(var(--mobile-offset) * 2)

I have a feeling the problem can be traced back to the following code;

sonner/src/styles.css

Lines 351 to 358 in a2bbec0

 @media (max-width: 600px) { 
   [data-sonner-toaster] { 
     position: fixed; 
     --mobile-offset: 16px; 
     right: var(--mobile-offset); 
     left: var(--mobile-offset); 
     width: 100%; 
   } 

We might have to add a case for RTL. I will try to work on a PR to fix it