a11y: right-to-left improvements

[PeerRich]

to test, change dir="rtl"

https://user-images.githubusercontent.com/8019099/210244585-bdf1183d-037f-4064-8fed-15a268dd1149.mp4

[linear[bot]]

CAL-653 investigate rtl layout issues

and use ltr:ml-4 rtl:mr-4 etc.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
cal	✅ Ready (Inspect)	Visit Preview	Jan 3, 2023 at 10:15PM (UTC)

[PeerRich]

@Udit-takkar can you test both rtl and ltr on the vercel preview? also worth having the current main branch on another browser tab to compare. hopefully ltr is identical. if not I made a mistake

[JeroenReumkens]

If we want to start doing this I think it's good if we communicate with everyone that they should take this into account. Otherwise we'll soon have a situation where this partially works, but breaks for new functionality. What do you think?

Besides that, Tailwind will soon (finally 😬) add support for margin-inline-start and -end. That's actually a more modern way to do this. If you use that instead of margin left/right, it will automatically be added on left/right side based on whether the user has rtl enabled. So that means you don't need to define the margin twice (for ltr and rtl). See https://github.com/tailwindlabs/tailwindcss/pull/10166

I know you've already done a bunch of work looking at the PR, but maybe it's worth it to wait for this change to get merged soon?