Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Width
A width can be explicitly set on a dialog. By default, a dialog is about 75 characters wide.
Important Notes:Use the width prop to adjust the dialog’s width.Full: This is taking up the full width of the screen minus the gutters (about 2rem on left and right). Regular: This is 10 out 12 columns wide, about 80% of the screen width. Optimal: This is about 75 characters wide, close to optimal reading length (This is the default setting).Auto: This adapts the width of the dialog content. Only use this option if the dialog content has an explicit width. Recommended for advanced usage.
Demo
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
width: 'full',
attributes: {
id: 'dialog-width-1'
},
} only %}