How do I change Dialog Modal width?

[SachinShekhar]

I want the Dialog modal to span the entire width of the screen. Applying h-full on DialogContent works, but w-full, w-[600px] etc have no effect on the modal width. Child flex-wrap wraps at just one element. Child grid-cols-5 forcefully shrinks items to fit five, but modal width remains the same.

[servesh-chaturvedi]

Did you try min-width instead of width?

[SachinShekhar]

min-w-full worked. Why?

[Pedromigacz]

The Dialog component has its width calculated based on w-full and max-w-lg. I assume you are having issues changing the width on desktop, so you probably just need to change the max-w property instead of w

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[drwpls]

For those who in trouble with dialog's width setting, The DialogContent component use max-w-lg which translate into max-width: 32rem; (512px) See change

To deal with this, you can remove max-w-lg in components/ui/dialog.tsx or use sm:max-w-[Npx] in the DialogContent component.

[maheshj01]

How do you prevent <DropdownMenu> from closing on clicking DropdownMenuItem

 <DropdownMenuItem
      onClick={() => onMenuClick('light')}
      className="px-6 text-md ">
      <Sun className='text-gray-600 hover:text-gray-900 ' size={24} />
 </DropdownMenuItem>

[servesh-chaturvedi]

@maheshmnj I guess you probably want the Popover Component not the dropdown if you want something similar to the status and priority filters in tasks example.

[mohd-khan09]

min-w-full worked. Why?

this is working fine for me as well

[anwarhossain1]

Simply add classes inside the DialogContent like this w-80 sm:w-full sm:max-w-lg