Trying to add some simple margin to left and right of a dialog box when viewing on a mobile screen. No matter where I seem to add mx-5 it doesn't actually work. Any ideas on how to add some margin to a shadcn dialog when viewing on a phone like this?
Example of Dialog on mobile without margin
Just about every place I can find on this component I added an mx-5 to add left and right margin but it doesn't seem to have an effect. Also tried sm:mx-5 hoping it would apply on mobile screens but no luck.
One way around it is first to note that
DialogContent
has amax-w-lg
around32rem
512px for large screens and:max-w-md
for smaller screens. To fix this, add a tailwind classw-11/12
- making the width not 100%.Below is an example from the docs - I've added the class to show the example.